Correspondance d'une boîte de saisie vide en utilisant CSS

Question

Comment appliquer un style à une zone de saisie vide? Si l'utilisateur tape quelque chose dans le champ de saisie, le style ne devrait plus être appliqué. Est-ce possible en CSS? J'ai essayé ceci:

input[value=""]

Answer 1

Dans les navigateurs modernes, vous pouvez utiliser :placeholder-shown pour cibler l'entrée vide (à ne pas confondre avec ::placeholder).

input:placeholder-shown {
    border: 1px solid red; /* Bordure rouge uniquement si l'entrée est vide */
}

En HTML, vous devez définir l'attribut placeholder. Le navigateur Chrome nécessite au moins un caractère d'espace en tant que valeur.

Answer 2

Si seul le champ est obligatoire , vous pouvez utiliser input:valide

#foo-thing:valide + .msg { visibility: visible!important; }      

 Yay not empty

Voir en direct sur jsFiddle

Ou négatif en utilisant #foo-thing:invalide (crédit à @SamGoody)

Answer 3

Il n'y a pas de sélecteur en CSS qui le fait. Les sélecteurs d'attributs correspondent aux valeurs des attributs, pas aux valeurs calculées.

Vous devriez utiliser JavaScript.

Answer 4

La mise à jour de la valeur d'un champ ne met pas à jour son attribut de valeur dans le DOM, c'est pourquoi votre sélecteur correspond toujours à un champ, même lorsqu'il n'est pas réellement vide.

Utilisez plutôt la pseudo-classe :invalid pour obtenir ce que vous voulez, comme ceci :

input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}

Answer 5

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

fonctionne avec:

Mais le style ne changera pas dès que quelqu'un commencera à taper (vous aurez besoin de JS pour cela).