English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La pseudo-classe :focus CSS représente l'élément qui a le focus (comme un champ de saisie de formulaire). Elle est déclenchée lorsque l'utilisateur clique ou touche l'élément ou le sélectionne avec la touche "tab" du clavier.
Manuel complet des sélecteurs CSS
Style sélectionné lorsqu'un champ d'entrée obtient le focus :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutoriel de base (oldtoolbag.com)</title>/title>
<style>
input:focus
{
background-color:orange;
}
</style>
</head>
<body>
<p>Cliquez sur le champ de saisie texte du formulaire pour voir le fond jaune :/p>
<form>
Prénom : <input type="text" name="firstname" /><br>
Nom de famille : <input type="text" name="lastname" />
</form>
<p><b>Attention :/b>Attention :8,DOCTYPE doit être déclaré</p>
</body>
</html>Voyons un exemple ‹/›Le sélecteur :focus est utilisé pour sélectionner les éléments qui ont le focus.
Astuce: Le sélecteur :focus accepte les événements de clavier ou d'autres entrées utilisateur des éléments.
Les nombres dans le tableau indiquent la première version du navigateur prenant en charge cette propriété.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Attention: Sélecteur :focus sélectionne dans IE8doit être déclaré<!DOCTYPE> .
Tutorial CSS : Pseudo-classe CSS