: tidak (: kosong) pemilih CSS tidak berfungsi?

Saya mengalami kesulitan dengan pemilih CSS khusus ini yang tidak ingin berfungsi ketika saya menambahkannya :not(:empty). Tampaknya berfungsi dengan baik dengan kombinasi apa pun dari penyeleksi lain:

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

Jika saya menghapus :not(:empty)bagian itu, itu berfungsi dengan baik. Bahkan jika saya mengubah pemilih input:not(:empty)tetap tidak akan memilih bidang masukan yang memiliki teks yang diketik di dalamnya. Apakah ini rusak atau saya hanya tidak diizinkan untuk digunakan :emptydalam :not()selektor?

Satu-satunya hal lain yang dapat saya pikirkan adalah bahwa browser masih mengatakan bahwa elemen tersebut kosong karena tidak memiliki turunan, hanya sebuah "nilai" per kata. Apakah :emptypemilih tidak memiliki fungsi terpisah untuk elemen masukan versus elemen biasa? Ini tampaknya tidak mungkin karena menggunakan :emptydi lapangan dan mengetik sesuatu ke dalamnya akan menyebabkan efek alternatif hilang (karena tidak lagi kosong).

Diuji di Firefox 8 dan Chrome.

Sebagai elemen kosong , <input>elemen dianggap kosong menurut definisi HTML "kosong", karena model konten dari semua elemen kosong selalu kosong . Jadi mereka akan selalu cocok dengan :emptypseudo-class, apakah mereka memiliki nilai atau tidak. Ini juga mengapa nilainya diwakili oleh atribut di tag awal, bukan konten teks dalam tag awal dan akhir.

Juga, dari spesifikasi Selectors :

The :emptypseudo-class merupakan elemen yang tidak memiliki anak sama sekali. Dalam hal pohon dokumen, hanya node elemen dan node konten (seperti node teks DOM, node CDATA, dan referensi entitas) yang datanya memiliki panjang bukan-nol harus dianggap mempengaruhi kekosongan;

Akibatnya, input:not(:empty)tidak akan pernah cocok dengan apapun dalam dokumen HTML yang benar. (Ini masih akan berfungsi dalam dokumen XML hipotetis yang mendefinisikan <input>elemen yang dapat menerima teks atau elemen turunan.)

Saya tidak berpikir Anda dapat memberi gaya <input>bidang kosong secara dinamis hanya dengan menggunakan CSS (yaitu aturan yang berlaku setiap kali bidang kosong, dan jangan sekali teks dimasukkan). Anda dapat memilih bidang yang awalnya kosong jika mereka memiliki valueatribut kosong ( input[value=""]) atau tidak memiliki atribut sama sekali ( input:not([value])), tapi itu saja.

Dimungkinkan dengan javascript sebaris 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);" />

Anda dapat mencoba menggunakan: placeholder-ditampilkan ...

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>

tidak ada dukungan yang bagus ... caniuse

Anda mungkin melakukan pendekatan ini secara berbeda; hilangkan penggunaan :emptypseudo-class dan manfaatkan inputperistiwa untuk mendeteksi nilai yang signifikan di <input>bidang dan berikan gaya yang sesuai:

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>

Terkait

• Pos lain tentang Peristiwa Mutasi DOM, menyarankan penggunaan inputPeristiwa ( Peristiwa Mutasi DOM sekarang sudah tidak digunakan lagi di level DOM 4, dan telah digantikan oleh Pengamat Mutasi DOM).

Penafian: perhatikan bahwa inputperistiwa saat ini bersifat eksperimental , dan mungkin tidak didukung secara luas.

Karena placeholder menghilang saat input, Anda dapat menggunakan:

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

solusi css murni

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

Solusi CSS murni lainnya

.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>

Ini harus berfungsi di browser modern:

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

Ini memilih semua input dengan atribut nilai dan kemudian memilih input dengan nilai yang tidak kosong di antara mereka.

input:not([value=""])

Ini berfungsi karena kami memilih input hanya ketika tidak ada string kosong.

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

// or 

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