Pseudoclases en formularios CSS

Con pseudoclases podemos apuntar a estados especiales en elementos de formulario, como cuando el usuario enfoca un campo, ingresa un dato inválido o un campo es obligatorio.

Pseudoclases básicas

Las pseudoclases más comunes incluyen <:focus> cuando el campo está activo, <:required> para campos obligatorios y <:disabled> para campos deshabilitados.

El siguiente ejemplo muestra un formulario básico con campos obligatorios que usan pseudoclases.

Pseudoclases avanzadas

La pseudoclase <:invalid> es muy útil si alguien introduce un dato erróneo, como un correo inválido. <:hover> y <:checked> también aportan interactividad.

Este ejemplo muestra cómo cambia el color de un campo en caso de entrada inválida y cómo se resalta cuando está en foco.

Consejos para pseudoclases

Usar pseudoclases con criterio mejora mucho la experiencia de usuario.

• Ofrece siempre retroalimentación al usuario cuando ingrese datos erróneos.
• Usa señales visuales como cambios de color para indicar foco o errores.
• No sobrecargues al usuario con demasiados cambios; la retroalimentación debe ser clara pero no molesta.