: not (: blank) Bộ chọn CSS không hoạt động?

Tôi đang gặp khó khăn với bộ chọn CSS cụ thể này, công cụ này không muốn hoạt động khi tôi thêm :not(:empty)vào nó. Nó dường như hoạt động tốt với bất kỳ sự kết hợp nào của các bộ chọn khác:

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

Nếu tôi loại bỏ :not(:empty)một phần, nó hoạt động tốt. Ngay cả khi tôi thay đổi bộ chọn thành input:not(:empty)nó vẫn sẽ không chọn các trường nhập có văn bản được nhập vào chúng. Cái này bị hỏng hay tôi không được phép sử dụng :emptytrong một :not()bộ chọn?

Điều khác duy nhất mà tôi có thể nghĩ đến là các trình duyệt vẫn nói rằng phần tử trống vì nó không có phần tử con, chỉ là một "giá trị" cho mỗi lần nói. Liệu :emptyselector không có chức năng riêng biệt cho một yếu tố đầu vào so với một yếu tố thường xuyên? Tuy nhiên, điều này dường như không thể xảy ra bởi vì sử dụng :emptytrên một trường và nhập một thứ gì đó vào nó sẽ khiến các hiệu ứng thay thế biến mất (vì nó không còn trống).

Đã thử nghiệm trên Firefox 8 và Chrome.

Là một phần tử void , một <input>phần tử được coi là rỗng theo định nghĩa "rỗng" trong HTML, vì mô hình nội dung của tất cả các phần tử void luôn trống . Vì vậy, chúng sẽ luôn khớp với lớp :emptygiả, cho dù chúng có giá trị hay không. Đây cũng là lý do tại sao giá trị của chúng được thể hiện bằng một thuộc tính trong thẻ bắt đầu, thay vì nội dung văn bản trong thẻ bắt đầu và kết thúc.

Ngoài ra, từ thông số Bộ chọn :

Lớp :emptygiả đại diện cho một phần tử không có phần tử nào cả. Về mặt cây tài liệu, chỉ các nút phần tử và nút nội dung (chẳng hạn như nút văn bản DOM, nút CDATA và tham chiếu thực thể) có dữ liệu có độ dài khác 0 mới được coi là ảnh hưởng đến tính trống;

Do đó, input:not(:empty)sẽ không bao giờ khớp với bất kỳ thứ gì trong một tài liệu HTML thích hợp. (Nó sẽ vẫn hoạt động trong một tài liệu XML giả định xác định một <input>phần tử có thể chấp nhận văn bản hoặc các phần tử con.)

Tôi không nghĩ rằng bạn có thể tạo kiểu <input>động cho các trường trống chỉ bằng cách sử dụng CSS (nghĩa là các quy tắc áp dụng bất cứ khi nào một trường trống và không khi văn bản được nhập). Bạn có thể chọn các trường trống ban đầu nếu chúng có valuethuộc tính trống ( input[value=""]) hoặc thiếu hoàn toàn thuộc tính ( input:not([value])), nhưng đó là về điều đó.

Có thể với javascript nội tuyến onkeyup="this.setAttribute('value', this.value);"&input:not([value=""]):not(:focus):invalid

Demo: http://jsfiddle.net/mhsyfvv9/

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

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

Bạn có thể thử sử dụng: trình giữ chỗ được hiển thị ...

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>

không có hỗ trợ lớn mặc dù ... caniuse

Bạn có thể tiếp cận điều này theo cách khác; bỏ qua việc sử dụng lớp :emptygiả và sử dụng inputcác sự kiện để phát hiện một giá trị quan trọng trong <input>trường và định kiểu nó cho phù hợp:

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>

Có liên quan

• Một bài đăng khác về Sự kiện đột biến DOM, đề xuất việc sử dụng inputSự kiện ( Sự kiện đột biến DOM hiện không được dùng trong DOM cấp 4 và đã được thay thế bằng Trình quan sát đột biến DOM).

Tuyên bố từ chối trách nhiệm: lưu ý rằng inputcác sự kiện hiện đang thử nghiệm và có thể không được hỗ trợ rộng rãi.

Vì trình giữ chỗ biến mất khi nhập liệu, bạn có thể sử dụng:

input:placeholder-shown{
    //rules for not empty input
}

dung dịch css tinh khiết

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;
}

Một giải pháp CSS thuần túy khác

.form{
  position:relative;
  display:inline-block;
}
.form input{
  margin-top:10px;
}
.form label{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition:all 1s ease;
}
input:not(:placeholder-shown) + label{
    top:-10px;
    opacity:1;
}

<div class="form">
    <input type="text" id="inputFName" placeholder="Firstname">
    <label class="label" for="inputFName">Firstname</label>
</div>
<div class="form">
    <input type="text" id="inputLName" placeholder="Lastname">
    <label class="label" for="inputLName">Lastname</label>
</div>

Điều này sẽ hoạt động trong các trình duyệt hiện đại:

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

Nó chọn tất cả các đầu vào có thuộc tính giá trị và sau đó chọn các đầu vào có giá trị không trống trong số chúng.

input:not([value=""])

Điều này hoạt động vì chúng tôi đang chọn đầu vào chỉ khi không có chuỗi trống.

input:not(:invalid){
 border: 1px red solid;
}

// or 

input:not(:focus):not(:invalid){
 border: 1px red solid;
}