Pseudo-classe :focus CSS

Définition et utilisation

CSS :focus Les pseudo-classes sont utilisées pour sélectionner et définir le style des éléments qui obtiennent le focus.

Exemple

Exemple 1

Sélectionner et définir le style lorsque le champ d'entrée obtient le focus :

input:focus {
  background-color: yellow;
}

Essayer vous-même

Exemple 2

Changer la couleur de fond et la largeur lorsque le champ d'entrée obtient le focus :

input:focus {
  background-color: yellow;
  width: 250px;
}

Essayer vous-même

Grammaire CSS

:focus {
  déclarations css;
}

Détails techniques

Version : CSS2

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette pseudo-classe.

Chrome Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Pages associées

Tutoriel :Pseudo-classe CSS