Clase pseudo CSS :focus

La pseudo-clase :focus selecciona y da estilo a los elementos que están enfocados por el usuario.

Los elementos, como <input>, <button> y <textarea>, pueden recibir el foco ya sea mediante la tecla Tab con el teclado o haciendo clic. Los elementos no interactivos también pueden recibir el foco del teclado si incluyen un atributo tabindex="0".

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 contra los colores adyacentes.

Al eliminar el contorno de foco predeterminado, siempre reemplázalo con un indicador personalizado que cumpla con los requisitos de WCAG 2.1 SC 2.4.7.

Para una mejor experiencia de usuario, considera usar la pseudo-clase :focus-visible en lugar de :focus. Aplica estilos solo cuando el elemento se enfoca mediante el teclado, evitando cambios visuales innecesarios al usar un mouse o táctil.

Clase pseudo CSS :focus

css

:focus {
  outline: none;
}

Versión

CSS2 Spec

Selectors level 3

Selectors level 4

Sintaxis

Ejemplo de sintaxis CSS :focus

css

:focus {
  css declarations;
}

Ejemplo del selector :focus:

Ejemplo de código CSS :focus

html

<!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>

Try it Yourself »

Ejemplo del selector :focus con la etiqueta `<label>`:

Otro ejemplo de código CSS :focus

html

<!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>

Try it Yourself »

Práctica

¿Cuál es la función de la pseudo-clase ':focus' en CSS?

Se utiliza para seleccionar y dar estilo al elemento actual con el que el usuario está interactuando.Se utiliza para aplicar estilos a un elemento cuando el puntero del mouse del usuario pasa sobre él.Se utiliza para seleccionar y dar estilo a un elemento cuando se ha hecho clic o tocado.Se utiliza para dar estilo a un elemento cuando el puntero del mouse del usuario se aleja de él.

Clase pseudo CSS :focus ​

Consideraciones de accesibilidad ​

Versión ​

Sintaxis ​

Ejemplo del selector :focus: ​

Ejemplo del selector :focus con la etiqueta <label>: ​