: değil (: boş) CSS seçici çalışmıyor?

Eklediğimde çalışmak istemeyen bu CSS seçici ile çok zaman geçiriyorum :not(:empty). Diğer seçicilerin herhangi bir kombinasyonu ile iyi çalışıyor gibi görünüyor:

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

Parçayı çıkarırsam :not(:empty)gayet iyi çalışıyor. Seçiciyi değiştirsem bile, input:not(:empty)içine metin yazılan giriş alanlarını seçmeyecek. Bu bozuk mu yoksa :emptybir :not()seçici içinde kullanmama izin verilmiyor mu?

Aklıma gelen diğer tek şey, tarayıcıların hala elementin boş olduğunu çünkü alt öğesi olmadığını söylüyorlar, sadece bir "değer". Does :emptyseçici düzenli eleman karşı bir giriş elemanı için ayrı özelliğe sahip değil? Bu olası görünmüyor, çünkü :emptybir alanda kullanmak ve içine bir şey yazmak, alternatif efektlerin kaybolmasına neden olur (çünkü artık boş değildir).

Firefox 8 ve Chrome'da test edilmiştir.

Bir olmak boşluk eleman , bir <input>eleman olarak kabul edilir boş tüm boşluk elemanların içerik modeli beri, "boş" HTML tanım gereği daima boş olduğunu . Dolayısıyla :empty, bir değeri olsun ya da olmasın, her zaman sözde sınıfla eşleşeceklerdir . Bu aynı zamanda, değerlerinin başlangıç ​​ve bitiş etiketleri içindeki metin içeriği yerine başlangıç ​​etiketindeki bir öznitelik ile temsil edilmesinin nedenidir.

Ayrıca, Seçiciler spesifikasyonundan :

:emptySözde sınıf hiç çocuk sahibi olmadığı bir öğesini temsil eder. Belge ağacı açısından, yalnızca verileri sıfır olmayan uzunlukta olan öğe düğümleri ve içerik düğümleri (DOM metin düğümleri, CDATA düğümleri ve varlık referansları gibi) boşluğu etkilediği düşünülmelidir;

Sonuç olarak, input:not(:empty)uygun bir HTML belgesindeki hiçbir şeyle asla eşleşmeyecektir. ( <input>Metin veya alt öğeleri kabul edebilen bir öğeyi tanımlayan varsayımsal bir XML belgesinde yine de çalışırdı .)

Boş <input>alanları dinamik olarak sadece CSS kullanarak biçimlendirebileceğinizi sanmıyorum (yani, bir alan boş olduğunda ve metin bir kez girilmediğinde geçerli olan kurallar). Boş bir özniteliğe sahiplerse ( ) veya öznitelikten tamamen yoksunlarsa ( ) başlangıçta boş alanlar seçebilirsiniz , ancak bu kadar.valueinput[value=""]input:not([value])

Satır içi javascript onkeyup="this.setAttribute('value', this.value);"& ile mümkündürinput: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);" />

Kullanmayı deneyebilirsiniz: yer tutucuda gösterilen ...

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>

yine de büyük bir destek yok ... caniuse

Buna farklı bir şekilde yaklaşabilirsiniz; :emptysözde sınıfın kullanımını atlayın ve inputolayları, <input>alandaki önemli bir değeri tespit etmek ve buna göre biçimlendirmek için kullanın :

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>

İlişkili

• Kullanımını öneren DOM mutasyon olayları bir başka mesaj inputOlaylar (DOM Mutasyon Etkinlikler artık DOM seviyesi 4 artık kullanılmamaktadır ve DOM Mutasyon gözlemciler ile ikame edilmiştir).

Yasal Uyarı: notu o inputolaylar halen deneyseldir ve muhtemelen yaygın desteklenmemektedir.

Yer tutucu girişte kaybolduğundan, şunları kullanabilirsiniz:

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

saf css çözümü

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

Başka bir saf CSS çözümü

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

Bu, modern tarayıcılarda çalışmalıdır:

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

Değer özniteliğine sahip tüm girdileri seçer ve ardından aralarında boş olmayan değeri olan girdileri seçer.

input:not([value=""])

Bu işe yarar çünkü girdiyi yalnızca boş bir dizge olmadığında seçiyoruz.

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

// or 

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