Cómo aplicar estilos a las entradas de formularios en CSS con :required, :optional, :valid y :invalid

Introducción

Cuando se trata de validar el contenido de los campos de entrada en el frontend, las cosas son mucho más fáciles ahora que antes. Podemos usar el:requerido,:opcional,:válidoy:inválidopseudoclases acopladas con atributos de validación de formulario HTML5 comorequeridoopatrónpara crear resultados visualmente muy atractivos. Estas pseudoclases funcionan paraaporte,área de textoyseleccionarelementos.

Pseudo-clases de entrada

A continuación se muestra un ejemplo de las pseudoclases en funcionamiento. Comencemos con este código HTML:

form action="#"  input type="text" placeholder="First Name" required  input type="email" placeholder="Email" required  input type="text" placeholder="Nickname"  input type="text" placeholder="Favorite pizza topping"/form

Y apliquemos los siguientes estilos:

input {  border: 2px solid;  border-radius: 4px;  font-size: 1rem;  margin: 0.25rem;  min-width: 125px;  padding: 0.5rem;  transition: background-color 0.5s ease-out;}input:optional {  border-color: gray;}input:required {  border-color: black;}input:invalid {  border-color: red;}

Aquí está el resultado:

En la demostración anterior, input type="email"hay un tipo de entrada HTML5 que indica a los navegadores que deben esperar una dirección de correo electrónico. Como también usamos el requiredatributo, los navegadores modernos solo establecerán la entrada :validcuando se ingrese una dirección de correo electrónico válida.

Añadiendo la pseudoclase :focus

Hagamos que las cosas sean aún más interesantes aplicando un estilo según el estado de enfoque y agregando una imagen de fondo y un color según el estado de validez y solo cuando la entrada esté enfocada. Usaremos el mismo marcado HTML.

Aquí está nuestro CSS actualizado:

input {  border: 2px solid;  border-radius: 4px;  font-size: 1rem;  margin: 0.25rem;  min-width: 125px;  padding: 0.5rem;  transition: border-color 0.5s ease-out;}input:optional {  border-color: gray;}input:required:valid {  border-color: green;}input:invalid {  border-color: red;}input:required:focus:valid {  background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;  background-size: 25px;}input:focus:invalid {  background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;  background-size: 25px;}

Hay dos cambios clave en el CSS anterior:

1. input:required:validAplica un estado de éxito solo a requiredlas entradas, porque técnicamente optionallas entradas siempre son válidas.
2. input:focus:valid' and 'input:focus:invalidse aplican a las entradas solo cuando están enfocadas.

Y aquí está el resultado:

Podrías tener la tentación de agregar contenido en lugar de usar::anteso::despuésen la entrada, pero lamentablemente eso no es posible en los elementos de entrada. Un truco sería tener un hermanodurarElemento al que se le añade contenido en función de la validez de la entrada. Algo así:

input:focus:invalid + span::before { ... }.