Focus en CSS

El efecto :focus en CSS te permite controlar la apariencia de un elemento cuando recibe el foco, ya sea por clic del mouse o por tabulación. Esto te permite crear interfaces más intuitivas y accesibles para los usuarios.

¿Cómo funciona :focus?

La pseudo-clase :focus se utiliza en conjunto con un selector CSS para aplicar estilos específicos a un elemento cuando este tiene el foco. La sintaxis básica es la siguiente:


selector:focus {
  propiedad1: valor1;
  propiedad2: valor2;
  ...
}

Lenguaje del código: CSS (css)

Ejemplos prácticos de :focus:

1. Resaltar un campo de texto:


<input type="text">

Lenguaje del código: HTML, XML (xml)

input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px #007bff;
}

Lenguaje del código: CSS (css)

2. Mostrar un mensaje de ayuda:


<button>Botón</button>

Lenguaje del código: HTML, XML (xml)

button:focus {
  outline: none;
  border-color: #007bff;

  /* Mostrar mensaje de ayuda */
  &::after {
    content: "Presiona Enter para enviar";
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    color: #000;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  &:focus::after {
    opacity: 1;
  }
}

Lenguaje del código: CSS (css)

3. Cambiar el estilo de un enlace:


<a href="#">Enlace</a>

Lenguaje del código: HTML, XML (xml)

a:focus {
  text-decoration: underline;
  font-weight: bold;
}

Lenguaje del código: CSS (css)

Conclusión:

El efecto :focus en CSS es una herramienta útil para mejorar la usabilidad y accesibilidad de tus páginas web. Combinándolo con creatividad y conocimiento de CSS, puedes crear interfaces más intuitivas y agradables para tus usuarios.