La pseudo-clase :invalid
de CSS representa cualquier elemento <input>
u otro elemento <form>
cuyos contenidos no se puedan validar.
/* Selecciona cualquier <input> no v谩lido */
input:invalid {
background-color: pink;
}
Esta pseudo-clase es 煤til para resaltar errores de campo para el usuario.
Sintaxis
:invalid
Ejemplo
Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.
HTML
<form>
<label for="url_input">Ingresa una URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Introduzca una direcci贸n de correo electr贸nico:</label>
<input type="email" id="email_input" required/>
</form>
CSS
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #C00000;
}
Resultado
Problemas de accesibilidad
El color rojo se usa com煤nmente para indicar una entrada no v谩lida. Las personas que tienen ciertos tipos de daltonismo no podr谩n determinar el estado de la entrada a menos que vaya acompa帽ado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.
Notas
Radio buttons
Si alguno de los radio buttons en un grupo es required
, la pseudo-clase :invalid
se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo name
).
Gecko por defecto
Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid
. Sin embargo, s铆 aplica un estilo (un "resplandor" rojo que usa la propiedad box-shadow
) a la pseudoclase :-moz-ui-invalid
, que se aplica en un subconjunto de casos para: :invalid
.
Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no v谩lidos:
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow: none;
}
Especificaciones
Especificaci贸n | Estado | Comentarios |
---|---|---|
HTML Living Standard La definici贸n de ':invalid' en esta especificaci贸n. |
Living Standard | Ning煤n cambio. |
HTML5 La definici贸n de ':invalid' en esta especificaci贸n. |
Recommendation | Define la sem谩ntica de HTML y la validaci贸n de restricciones. |
Selectors Level 4 La definici贸n de ':invalid' en esta especificaci贸n. |
Working Draft | Definici贸n Inicial. |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver tambi茅n
- Otras pseudo-clases relacionadas con la validaci贸n:
:required
,:optional
,:valid
- Pseudo-clases relacionadas de Mozilla:
:-moz-ui-invalid
,:-moz-submit-invalid
- Validaci贸n de datos de formulario