Le sélecteur CSS :not(:empty) ne fonctionne pas ?

Question

J'ai beaucoup de mal avec ce sélecteur CSS particulier qui ne veut pas fonctionner lorsque j'ajoute :not(:empty) à elle. Il semble fonctionner correctement avec n'importe quelle combinaison des autres sélecteurs :

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

Si je retire le :not(:empty) il fonctionne très bien. Même si je change le sélecteur en input:not(:empty) il ne sélectionne toujours pas les champs de saisie dans lesquels du texte a été saisi. Est-ce que c'est cassé ou est-ce que je n'ai pas le droit d'utiliser la fonction :empty à l'intérieur d'un :not() sélecteur ?

La seule autre chose à laquelle je peux penser est que les navigateurs continuent à dire que l'élément est vide parce qu'il n'a pas d'enfants, juste une "valeur" par exemple. Est-ce que l'élément :empty Le sélecteur n'a-t-il pas une fonctionnalité distincte pour un élément d'entrée et un élément normal ? Cela ne semble pas probable car l'utilisation de :empty sur un champ et taper quelque chose dedans fera disparaître les effets alternatifs (parce que le champ n'est plus vide).

Testé avec Firefox 8 et Chrome.

Answer 1

Être un vide élément , un <input> est considéré comme un élément vide par la définition HTML de "empty", puisque le modèle de contenu de tous les éléments void est toujours vide . Ils correspondront donc toujours à la :empty qu'ils aient ou non une valeur. C'est également la raison pour laquelle leur valeur est représentée par un attribut dans la balise de début, plutôt que par un contenu textuel dans les balises de début et de fin.

De plus, à partir de la Spécifications des sélecteurs :

Les :empty représente un élément qui n'a aucun enfant. En ce qui concerne l'arbre du document, seuls les nœuds d'éléments et les nœuds de contenu (tels que les nœuds de texte DOM, les nœuds CDATA et les références d'entités) dont les données ont une longueur non nulle doivent être considérés comme affectant le vide ;

En conséquence, input:not(:empty) ne correspondra jamais à quoi que ce soit dans un document HTML correct. (Cela fonctionnerait encore dans un hypothétique document XML qui définirait un <input> qui peut accepter du texte ou des éléments enfants).

Je ne pense pas qu'il soit possible d'avoir un style vide <input> dynamiquement à l'aide de CSS (c'est-à-dire des règles qui s'appliquent chaque fois qu'un champ est vide et qui ne s'appliquent plus une fois qu'un texte est saisi). Vous pouvez sélectionner dans un premier temps les champs vides s'ils ont un value attribut ( input[value=""] ) ou l'absence totale de cet attribut ( input:not([value]) ), mais c'est à peu près tout.

Answer 2

C'est possible avec du javascript en ligne onkeyup="this.setAttribute('value', this.value);" & input:not([value=""]):not(:focus):invalid

Démonstration : 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);" />

Answer 3

Vous pouvez essayer d'utiliser :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>

pas de grand soutien cependant... caniuse

Answer 4

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

Answer 5

Vous pouvez procéder différemment, en omettant l'utilisation de l'élément :empty et utiliser la pseudo-classe input pour détecter une valeur significative dans le <input> puis le styliser en conséquence :

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>

En rapport

• Un autre billet sur les événements de mutation DOM, suggérant l'utilisation de input Evénements (Les événements de mutation DOM sont maintenant obsolètes dans DOM niveau 4, et ont été remplacés par les observateurs de mutation DOM).

---

Avis de non-responsabilité : noter que input événements sont actuellement expérimentales et n'est probablement pas largement soutenu. non ! oubliez-le - c'est une niveau de vie actuel .