La pseudo-class CSS :focus representa un element (com ara una entrada de formulari) que ha rebut el focus. Generalment, s'activa quan l'usuari fa clic o toca un element o el selecciona amb la tecla "tab" del teclat.
/* Selecciona qualsevol <input> quan s'enfoca */
input:focus {
color: red;
}
Nota: Aquesta pseudo-class s'aplica només a l'element enfocat. Utilitzeu :focus-within si voleu seleccionar un element que contingui un element enfocat.
Sintaxi
:focus
Exemple
HTML
<input class="red-input" value="I'll be red when focused."><br> <input class="blue-input" value="I'll be blue when focused.">
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Resultat
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| HTML Living Standard The definition of ':focus' in that specification. |
Living Standard | Defineix la semàntica específica d'HTML. |
| Selectors Level 4 The definition of ':focus' in that specification. |
Working Draft | Sense canvis |
| Selectors Level 3 The definition of ':focus' in that specification. |
Recommendation | Sense canvis |
| CSS Level 2 (Revision 1) The definition of ':focus' in that specification. |
Recommendation | Definició inicial |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 8.0 | 7.0 | 1.0 |
| Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Suport bàsic | 1.0 | (Yes) | 1.0 (1) | 8.0 | 6.0 | 1.0 |