Se :user-invalidtrata de una pseudoclase CSS que se propone en el borrador de trabajo de nivel 4 de Selectores CSS que selecciona un elemento de formulario en función de si el valor, tal como lo ingresó un usuario, es válido cuando se compara con lo que se especifica como un valor aceptado en el marcado HTML después de que el usuario final haya interactuado con el formulario más allá de esa entrada. De hecho, :user-invalidse le ha llamado “La pseudoclase de interacción del usuario” porque es única en la identificación de una acción del usuario al seleccionar un elemento.
Tome el siguiente marcado HTML para un formulario básico con un campo numérico:
El rango numérico establecido por el marcado HTML para la entrada está entre 1y, 10pero el valor predeterminado se ha establecido en 11. Eso significa que el valor no es válido tan pronto como se carga el formulario.
Sin embargo, la :user-invalidpseudoclase no entrará en vigencia hasta que el usuario haya interactuado realmente con el formulario más allá de ingresarlo en el campo. Esa interacción es la diferencia entre :user-invalidy :invalid. El mismo principio se aplica para formar valores introducidos por el que se establecen :in-range, :out-of-rangey :required.
Una vez que se determina que el valor que ha introducido el usuario es una entrada no válida, podemos seleccionar el elemento:
input:user-invalid ( color: red; )La siguiente imagen ilustra los diferentes estados entre :validy se :user-invalidbasa en el ejemplo HTML anterior.
Lo confuso aquí es cómo estrechamente relacionados :invalidy :user-invalidson. Si se usan juntos, puede ser difícil distinguir los dos:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(centro) y un valor no válido ingresado por un usuario (derecha) puede ser difícil de distinguir
Usar uno sobre el otro o tener un estilo distinto entre los dos podría resultar una mejor experiencia de usuario en un caso de uso de la vida real.
Soporte del navegador
:user-invalid Actualmente no se admite, pero se propone en el borrador de trabajo de CSS Selectors Level 4.
Firefox usa una propiedad no estándar con prefijo -moz-ui-invalidque adopta estándares similares.
Relacionado
:invalid:valid
Más información
- Especificación de nivel 4 de selectores CSS
- Especificación MDN para
:-moz-ui-invalid