:focus

This translation is incomplete. Please help translate this article from English

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

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

Vegeu també