: not (: empty) CSS 선택기가 작동하지 않습니까?

: not (: empty) CSS 선택기가 작동하지 않습니까?

---

추가 :not(:empty)할 때 작동하지 않는이 특정 CSS 선택기로 시간을 보내고 있습니다. 다른 선택기의 조합으로 잘 작동하는 것 같습니다.

input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }

:not(:empty)부품을 제거하면 잘 작동합니다. 선택기를 변경하더라도 input:not(:empty)텍스트가 입력 된 입력 필드는 선택되지 않습니다. 이것이 깨졌습니까 아니면 선택기 :empty내 에서 사용할 수 :not()없습니까?

내가 생각할 수있는 유일한 다른 것은 브라우저가 여전히 자식이 없기 때문에 요소가 비어 있다고 말하는 것입니다. 않는 :empty선택은 정기적 요소에 비해 입력 요소에 대해 별도의 기능을 가지고 있지? :empty필드에서 사용하고 여기 에 무언가를 입력하면 대체 효과가 사라 지기 때문에 가능성이 없어 보입니다 (더 이상 비어 있지 않기 때문에).

Firefox 8 및 Chrome에서 테스트되었습니다.

---

수있는 Being 무효 요소 , <input>요소로 간주됩니다 빈 모든 무효 요소의 컨텐츠 모델 이후, "비우기"의 HTML 정의에 의해 항상 비어 있습니다 . 따라서 :empty값이 있는지 여부에 관계없이 항상 의사 클래스 와 일치합니다 . 이것이 그 값이 시작 및 끝 태그 내의 텍스트 내용이 아니라 시작 태그의 속성으로 표시되는 이유이기도합니다.

또한 선택기 사양에서 :

:empty의사 클래스는 모든에 자식이없는 요소를 나타냅니다. 문서 트리와 관련하여 데이터 길이가 0이 아닌 요소 노드 및 콘텐츠 노드 (예 : DOM 텍스트 노드, CDATA 노드 및 엔티티 참조) 만 비어 있음에 영향을 미치는 것으로 간주되어야합니다.

결과적으로 input:not(:empty)적절한 HTML 문서의 어떤 것과도 일치하지 않습니다. ( <input>텍스트 또는 자식 요소를 허용 할 수 있는 요소를 정의하는 가상의 XML 문서에서 여전히 작동 합니다.)

<input>CSS 만 사용하여 동적으로 빈 필드의 스타일을 지정할 수 있다고 생각하지 않습니다 (즉, 필드가 비어있을 때마다 적용되고 텍스트를 입력하지 않는 규칙). 속성 이 비어 있거나 ( ) 속성이 완전히없는 경우 ( ) 처음에 비어있는 필드를 선택할 수 있지만 그게 전부 입니다.valueinput[value=""]input:not([value])

---

인라인 자바 스크립트 onkeyup="this.setAttribute('value', this.value);"및input:not([value=""]):not(:focus):invalid

데모 : http://jsfiddle.net/mhsyfvv9/

input:not([value=""]):not(:focus):invalid{
  background-color: tomato;
}

<input 
  type="email" 
  value="" 
  placeholder="valid mail" 
  onkeyup="this.setAttribute('value', this.value);" />

---

: placeholder-shown ...을 사용해 볼 수 있습니다.

input {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 5px;
  border: 2px solid lightblue;
  outline: 0;
  font-weight:bold;
  transition: border-color 200ms;
  font-family: sans-serif;
}

.validation {
  opacity: 0;
  font-size: 12px;
  font-family: sans-serif;
  color: crimson;
  transition: opacity;
}

input:required:valid {
  border-color: forestgreen;
}

input:required:invalid:not(:placeholder-shown) {
  border-color: crimson;
}

input:required:invalid:not(:placeholder-shown) + .validation {
  opacity: 1;
}

  

<input type="email" placeholder="e-mail" required>
<div class="validation">Not valid</span>

그래도 큰 지원은 ... caniuse

---

이 방법은 다르게 접근 할 수 있습니다. :empty의사 클래스 의 사용을 생략하고 input이벤트를 활용 하여 <input>필드 에서 중요한 값을 감지하고 그에 따라 스타일을 지정합니다.

var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  input.addEventListener('input', function() {
    var bg = this.value ? 'green' : 'red';
    this.style.backgroundColor = bg;
  });
}

body {
  padding: 40px;
}
#inputList li {
  list-style-type: none;
  padding-bottom: 1.5em;
}
#inputList li input,
#inputList li label {
  float: left;
  width: 10em;
}
#inputList li input {
  color: white;
  background-color: red;
}
#inputList li label {
  text-align: right;
  padding-right: 1em;
}

<ul id="inputList">
  <li>
    <label for="username">Enter User Name:</label>
    <input type="text" id="username" />
  </li>
  <li>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" />
  </li>
</ul>

관련

• DOM Mutation Events에 대한 또 다른 게시물은 input이벤트 사용을 제안합니다 (DOM Mutation Events는 이제 DOM 레벨 4에서 사용되지 않으며 DOM Mutation Observers로 대체되었습니다).

---

면책 조항 : 참고 input이벤트는 현재 실험 단계 , 그리고 아마도 널리 지원되지 않습니다.

---

.floating-label-input {
  position: relative;
  height:60px;
}
.floating-label-input input {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
  border: 0 none;
  outline: none;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
  padding-top: 10px;
}
.floating-label-input label {
  position: absolute;
  top: calc(50% - 5px);
  font-size: 22px;
  left: 0;
  color: #000;
  transition: all 0.3s;
}
.floating-label-input input:focus ~ label, .floating-label-input input:focus ~ label, .floating-label-input input:valid ~ label {
  top: 0;
  font-size: 15px;
  color: #33bb55;
}
.floating-label-input .line {
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: #000;
  left: 0;
}
.floating-label-input .line:after {
  content: "";
  display: block;
  width: 0;
  background: #33bb55;
  height: 1px;
  transition: all 0.5s;
}
.floating-label-input input:focus ~ .line:after, .floating-label-input input:focus ~ .line:after, .floating-label-input input:valid ~ .line:after {
  width: 100%;
}

<div class="floating-label-input">
      <input type="text" id="id" required/>
      <label for="id" >User ID</label>
      <span class="line"></span>
</div>

---

순수한 CSS 솔루션

input::-webkit-input-placeholder {
    opacity: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* Chrome <=56, Safari < 10 */
input:-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 4-18 */
input::-moz-placeholder {
    opacity: 1;
    -moz-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* FF 19-51 */
input:-ms-input-placeholder {
    opacity: 1;
    -ms-transition: opacity 0s;
    transition: opacity 0s;
    text-align: right;
}
/* IE 10+ */
input::placeholder {
    opacity: 1;
    transition: opacity 0s;
    text-align: right;
}
/* Modern Browsers */

*:focus::-webkit-input-placeholder {
   opacity: 0;
   text-align: left;
}
/* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 4-18 */
*:focus::-moz-placeholder {
    opacity: 0;
    text-align: left;
}
/* FF 19-50 */
*:focus:-ms-input-placeholder {
    opacity: 0;
    text-align: left;
}
/* IE 10+ */
*:focus::placeholder {
    opacity: 0;
    text-align: left;
}
/* Modern Browsers */

input:focus {
    text-align: left;
}

---

이것은 최신 브라우저에서 작동합니다.

input[value]:not([value=""])

값 속성이있는 모든 입력을 선택한 다음 그 중에서 값이 비어 있지 않은 입력을 선택합니다.

---

input:not([value=""])

이것은 빈 문자열이 없을 때만 입력을 선택하기 때문에 작동합니다.

참고URL : https://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working