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

Vous pouvez le faire en ajoutant placeholder à l'entrée avec une valeur vide, puis ajouter input:not(:placeholder-shown)

<input type="text" placeholder=" ">

input:not(:placeholder-shown){
 color: red;
}

Answer 2

input:not([value=""])

Cela fonctionne parce que nous ne sélectionnons l'entrée que lorsqu'il n'y a pas de chaîne vide.

Answer 3

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

// or 

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

Answer 4

Cela devrait fonctionner dans les navigateurs modernes :

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

Il sélectionne toutes les entrées avec l'attribut valeur et sélectionne ensuite les entrées avec une valeur non vide parmi elles.

Answer 5

Vous pouvez utiliser &:valid sur votre entrée et cela fera l'affaire.