01 Capítulo 1 · Lección 8

Focus y Formularios

Redactado por

Author

Fecha de publicación

02/04/2024

Tiempo de lectura

5 min

Tema

CSS Transitions

Más allá del ratón

El hover es genial para los usuarios con ratón, pero ¿qué pasa cuando interactuamos con teclados o tocamos un campo en el móvil? El estado :focus es crucial para la accesibilidad y la experiencia del usuario en la entrada de datos. Un formulario sin un buen estado de focus es como escribir en una habitación a oscuras.

Transiciones en Inputs

Cuando un usuario hace clic en un campo de texto, espera una confirmación visual. En lugar de un cambio brusco del borde, una transición suave transmite confianza y modernidad.

Además, los patrones modernos de UI, como los Floating Labels (Etiquetas Flotantes), dependen de animaciones precisas. Cuando el usuario hace clic, la etiqueta no desaparece, sino que se desliza hacia arriba, dejando espacio para escribir.

Focus Ring

Un error de novato es usar outline: none para ocultar el borde feo predeterminado del navegador, y no poner nada en su lugar. La forma profesional de hacerlo es ocultarlo, pero añadir un anillo suave usando box-shadow y transicionarlo.

Consejo profesional

El pseudo-selector :focus-within es súper útil. Permite aplicar estilos a un formulario o div padre entero siempre que cualquiera de sus inputs hijos esté enfocado.

Ejemplo práctico (Floating Label)

> _

<div class="input-group">
  <input type="text" class="input" placeholder=" ">
  <label class="label">Correo Electrónico</label>
</div>

.input-group {
  position: relative;
  width: 260px;
}

.input {
  width: 100%;
  padding: 16px 12px 8px;
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 0;
  color: white;
  font-size: 16px;
  font-family: 'afronaut', serif;
  outline: none;
  transition: border-color 0.3s ease;
}

.label {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #a1a1aa;
  font-size: 16px;
  pointer-events: none;
  transition: all 0.3s ease-out;
  font-family: 'afronaut', serif;
  font-weight: 300;
}

/* Estado de focus en el input */
.input:focus {
  border-color: #a855f7;
}

/* Anima la etiqueta si el input tiene focus o no está vacío */
.input:focus ~ .label,
.input:not(:placeholder-shown) ~ .label {
  top: 4px;
  font-size: 11px;
  color: #a855f7;
}

> _

Correo Electrónico

Haz clic dentro del input para escribir. Observa cómo el borde se ilumina y la etiqueta se desliza suavemente hacia arriba para dejarte espacio.

Errores comunes

01

Usar display: none en etiquetas Ocultar las etiquetas (labels) afecta seriamente a los lectores de pantalla y a la accesibilidad. Usa floating labels o déjalas fijas.

02

Focus sin contraste Si el color de focus es casi idéntico al color normal, el usuario no sabrá dónde está escribiendo.

Practica lo aprendido

Construye formularios accesibles y con una gran respuesta táctil/visual.

01 Entiende que el focus indica dónde está escribiendo el usuario.

02 Usa box-shadow para crear "anillos de enfoque" (focus rings) suaves.

03 No quites el outline de los inputs sin reemplazarlo por un estado visible.

04 Aprovecha :placeholder-shown para animar etiquetas flotantes.

05 Mantén el contraste alto para accesibilidad.