PRATIQUE CLIENTS WEB 
CSS : la pseudo-classe :focus
 
"Y'a-t-il un moyen de clarifier, ou rendre plus visible, un élément sélectionné d'une page Web ?" (03/05/2006)
  Forum

Réagissez dans les forums de JDN Développeurs

Les variations d'un élément graphique en HTML (couleur, position, taille...) passent le plus souvent par CSS. CSS 2 comporte trois pseudo-classes chargées de réagir immédiatement aux actions du visiteur : ce sont :hover, :focus et :active.

La plupart d'entre nous connait :hover pour l'avoir déjà utilisé en combinaison avec la balise <a ... > : elle permet de préciser la forme du lien lorsque le curseur de la souris le survole. De la même manière, :focus peut être utilisé pour modifier un élément sélectionné - le plus souvent un élément de formulaire, comme un champ textuel ou un bouton.

Cette pseudo-classe s'utilise de la même manière que :hover :

#formulaire input#nom {
  background: #999;
  }

#formulaire input#nom:focus {
  background:#ddd;
  }

On peut également combiner les pseudo-classes :

#formulaire input#nom:focus:hover {
  background:#fff;
  }

Cette dernière règle indique que la couleur de fond de l'élément #nom passera en blanc si l'élément est sélectionné (donc si le curseur de texte y est activé), et si la souris le survole.

Notez que :focus ne fonctionne vraiment qu'avec les navigateurs l'implémentant correctement - ce qui laisse de côté Internet Explorer. Les utilisateurs de Firefox profiteront cependant de cet ajout.



Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page