:focus

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;
}

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

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!

Vegeu també

• :focus-within