CSS :focus Pseudo Class
La pseudoclase :focus de CSS selecciona los elementos enfocados. Aprende sobre la pseudoclase y practica con ejemplos.
La pseudoclase :focus selecciona y aplica estilos a un elemento mientras está enfocado — es decir, mientras es el elemento configurado para recibir la entrada del teclado.
Solo un elemento de la página puede tener el foco a la vez. Los controles de formulario como <input>, <button>, <textarea> y los enlaces pueden recibir el foco al navegar con la tecla Tab o haciendo clic. Los elementos no interactivos (como un <div>) también pueden volverse enfocables si se añade el atributo tabindex="0".
Esta página explica cómo funciona :focus, por qué casi nunca debes eliminar el indicador de foco sin un reemplazo, y las pseudoclases relacionadas :focus-visible y :focus-within que resuelven problemas comunes que :focus por sí solo no puede resolver.
Cómo funciona el estilo de foco
Cuando un elemento recibe el foco, el navegador aplica un outline predeterminado para que los usuarios de teclado puedan ver dónde se encuentran. La regla :focus permite anular o mejorar ese indicador:
input:focus {
outline: 2px solid #2563eb;
background-color: #eef4ff;
}:focus es una pseudoclase dinámica: los estilos se aplican solo mientras el elemento está enfocado y se eliminan en el momento en que el foco se desplaza a otro lugar (por ejemplo, cuando el usuario pasa al siguiente campo con Tab).
Consideraciones de accesibilidad
El indicador visual de foco debe ser accesible para todos los usuarios. Según WCAG 2.1 SC 2.4.7 Focus Visible, el indicador de foco debe ser claramente visible y mantener una relación de contraste de al menos 3:1 con los colores adyacentes.
Un error común es eliminar el outline por completo para lograr un aspecto más "limpio":
/* Don't do this on its own — keyboard users lose all feedback */
:focus {
outline: none;
}Si eliminas el outline predeterminado, sustitúyelo siempre por un indicador personalizado (un borde visible, box-shadow o cambio de fondo) que cumpla el requisito de contraste 3:1:
button:focus {
outline: none;
box-shadow: 0 0 0 3px #2563eb;
}:focus vs :focus-visible
La pseudoclase :focus se activa tanto con clics de ratón como con la navegación por teclado. Esto significa que hacer clic en un botón puede dejar un anillo de foco visible después del clic — visualmente molesto para los usuarios de ratón, pero esencial para los usuarios de teclado.
La pseudoclase :focus-visible resuelve esto: el navegador solo la aplica cuando considera que un indicador visible es genuinamente útil, normalmente durante la navegación por teclado. El patrón recomendado es mantener una señal sutil para todos y un anillo destacado solo para :focus-visible:
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}:focus-within
:focus-within coincide con un elemento cuando él o cualquiera de sus descendientes está enfocado. Es muy útil para resaltar un grupo de formulario completo, una tarjeta o un menú desplegable cuando uno de sus campos está activo:
.field:focus-within {
border-color: #2563eb;
}Versión
Sintaxis
Ejemplo de sintaxis CSS :focus
:focus {
css declarations;
}Ejemplo del selector :focus:
Ejemplo de código CSS :focus
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name" /> Surname:
<input type="text" name="surname" />
</form>
</body>
</html>Ejemplo del selector :focus con la etiqueta <label>:
Otro ejemplo de código CSS :focus
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
</form>
</body>
</html>Pseudoclases relacionadas
:focus es una de varias pseudoclases dinámicas que responden a la interacción del usuario. Explora las demás:
:hover— aplica estilos a un elemento mientras el puntero está sobre él.:active— aplica estilos a un elemento mientras está siendo activado (el momento del clic).outline— la propiedad más utilizada para crear un indicador de foco personalizado.