El :invalidselector le permite seleccionar elementos que no contienen contenido válido, según lo determinado por su typeatributo. :invalidse define en la especificación CSS Selectors Level 3 como un "pseudo-selector de validez", lo que significa que se utiliza para diseñar elementos interactivos basándose en una evaluación de la entrada del usuario.
Este selector tiene un uso particular: proporcionar comentarios al usuario mientras interactúa con un formulario en la página. El siguiente ejemplo utiliza CSS para convertir los campos de "Correo electrónico" en rojo o verde, respondiendo a si el contenido coincide o no con un patrón de dirección de correo electrónico válido:
Observe cómo el primero ("Correo electrónico") es válido en verde, incluso cuando no hay contenido en el campo. Esto se debe a que la entrada es opcional, por lo que dejarla en blanco resultaría en un envío de formulario válido. Para corregir este comportamiento, el segundo tiene un atributo "obligatorio", lo que significa que un campo en blanco resultaría en un envío de formulario no válido.
Puntos de interés
:invalidse puede "encadenar" con otros pseudo-selectores: les gusta:focusvalidar solo cuando el usuario está escribiendo,:beforeo:aftergenerar íconos o texto para proporcionar más comentarios del usuario, o selectores de atributos comoinput(value="")para validar solo los campos de entrada que contienen contenido.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | no | no |
:invalidse introdujo en CSS Selectors Module 3, lo que significa que las versiones antiguas de los navegadores no lo admiten. Sin embargo, la compatibilidad con los navegadores modernos está mejorando. Si necesita compatibilidad con un navegador más antiguo, utilice polyfill o utilice estos selectores de formas no críticas, como la mejora progresiva, que se recomienda.