¿Qué tal, amigos de EDteam? En esta ocasión daremos un vistazo a algunas pseudo-clases de formularios bastantes interensates, que, si se aplican de forma correcta, nos ayudarán a mejorar mucho la UX de nuestro sitio.
:valid, :invalid
Con estas pseudo-clases podemos saber si la información introducida en un input corresponde al formato que pide, ya sea validando su type o el atributo pattern (la cual se utiliza para introducir una expresión regular). En palabras más sencillas, podemos saber si se ingresó una letra donde debería ir un número, un correo con formato mal escrito y mucho más cosas. :valid se utilizará para inputs con formatos válidos e invalid cuando no. Algunos inputs son válidos aunque no se introduzca información, te recomiendo leer la documentación acerca de ellos.
See the Pen :valid, :invalid | EDteam blog by Juan Alexis Mora Angulo (@Jopzik) on CodePen.
:placeholder-shown
:placeholder-shown selecciona a los inputs o textareas que tienen su placeholder visible, en otras palabras nos indica si un input o textarea con el atributo placeholder tiene texto en éste o no.
See the Pen :placeholder-shown | EDteam blog by Juan Alexis Mora Angulo (@Jopzik) on CodePen.
:focus, :focus-within
Estas dos pseudo-clases se activan cuando reciben el foco, la diferencia es que focus se utiliza directamente en inputs o textareas y :focus-within en contenedores que tengan algún input dentro y se activará cuando alguno de sus hijos obtenga el foco.
See the Pen :focus, :focus-within | EDteam blog by Juan Alexis Mora Angulo (@Jopzik) on CodePen.
:required, :optional
Con :required podemos identificar cuáles inputs o textareas son obligatorios, para poder utilizarlo deben tener el atributo required, mientras que con optional se selecciona a los inputs o textareas que no contengan dicho atributo.
See the Pen :required, :optional | EDteam blog by Juan Alexis Mora Angulo (@Jopzik) on CodePen.
read-only, read-write
:read-only permite seleccionar a los inputs o textareas que sólo sean de lectura, para ello se debe tener el atributo readonly, mientras que :read-write no necesita un atributo, es válido para todos los inputs en los que se pueda escribir. Algo a tener en cuenta es que, aunque un input con el atributo disabled no se puede modificar su contenido, no es seleccionado con :read-only.
See the Pen :read-only, :read-write| EDteam blog by Juan Alexis Mora Angulo (@Jopzik) on CodePen.
Haciendo uso de lo aprendido y con algo de tu ingenio puedes lograr formularios interactivos sólo con HTML y CSS.
See the Pen Beautiful Form Material Design Only With HTML & CSS by Juan Alexis Mora Angulo (@Jopzik) on CodePen.