CSS : sélecteur de mise au point
Exemple
Sélectionnez et stylisez un champ de saisie lorsqu'il obtient le focus :
input:focus
{
background-color: yellow;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Le :focus
sélecteur est utilisé pour sélectionner l'élément qui a le focus.
Astuce : Le sélecteur :focus est autorisé sur les éléments qui acceptent les événements de clavier ou d'autres entrées utilisateur.
Version: | CSS2 |
---|
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le sélecteur.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Syntaxe CSS
:focus {
css declarations;
}
Plus d'exemples
Exemple
Lorsqu'un <input type="text"> obtient le focus, changez progressivement la largeur de 100px à 250px :
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Pages connexes
Tutoriel CSS : Pseudo-classes CSS