:focus

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.

css
/* Selecciona cualquier <input> cuando se enfoca */
input:focus {
  color: red;
}

Nota: Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice :focus-within si desea seleccionar un elemento que contenga un elemento enfocado.

Sintaxis

Error: could not find syntax for this item

Ejemplo

HTML

html
<input
  class="red-input"
  value="Voy a ser de color rojo cuando enfoque." /><br />
<input class="blue-input" value="Voy a ser de color azul cuando enfoque." />

CSS

css
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

Resultado

Sobre Accesibilidad

Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de WCAG 2.1 requiere que el indicador de foco tenga un contraste de por lo menos 3:1.

:focus { outline: none; }

Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.

Especificaciones

Specification
HTML
# selector-focus
Selectors Level 4
# focus-pseudo

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:focus

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también