: sélecteur actif ne se produit que sur un clic

Question

Avec le code HTML suivant:

<input type="text"> 

Et le CSS:

input[type="text"] {outline: none; border: thin solid red} 
input[type="text"]:active {border: thin solid yellow} 

J'espère que le champ de texte aurait une bordure jaune lorsqu'elle est active (quand l'utilisateur tape). Cependant, le nouveau style ne s'applique que lorsque vous cliquez sur l'élément. Comment puis-je atteindre l'effet que je veux?

Answer 1

Vous devez utiliser :focus:

input[type="text"]:focus {border: thin solid yellow} 

JSFiddle Demo.

---

De W3C:

La pseudo-classe :active applique alors un élément est activé par l'utilisateur. Par exemple, entre les moments où l'utilisateur appuie sur le bouton de la souris et le relâche.

La pseudo-classe :focus s'applique lorsqu'un élément est actif (accepte les événements de clavier ou de souris ou d'autres formes d'entrée).