La pseudo-class CSS :invalid
representa qualsevol element <input>
o un altre <form>
en que el seu contingut no es valida.
/* Selecciona qualsevol <input> inv脿lit */
input:invalid {
background-color: pink;
}
Aquesta pseudo-class 茅s 煤til per ressaltar errors de camp per a l'usuari.
Sintaxi
:invalid
Exemple
Aquest exemple presenta una forma senzilla que acoloreix elements en verd quan es validen i vermells quan no ho fan.
HTML
<form>
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Enter an email address:</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;
}
Resultat
Notes
Botons de r脿dio
Si un bot贸 de r脿dio qualsevol en un grup 茅s required
, la pseudo-class :invalid
s'aplica a tots ells si no se selecciona cap dels botons del grup. (Els botons de r脿dio agrupats comparteixen el mateix valor per al seu atribut name
).
Gecko per defecte
Per defecte, Gecko no aplica un estil a la pseudo-class :invalid
. Tanmateix, aplica un estil (un "resplendor" vermell usant la propietat box-shadow
) a la pseudo-class :-moz-ui-invalid
que s'aplica en un subconjunt de casos per :invalid
.
Podeu desactivar la brillantor usant el seg眉ent CSS, o anul路lar-ho completament per alterar l'aparen莽a dels camps no v脿lids:
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow: none;
}
Especificacions
Especificaci贸 | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of ':invalid' in that specification. |
Living Standard | Cap canvi. |
HTML5 The definition of ':invalid' in that specification. |
Recommendation | Defineix la sem脿ntica d'HTML i la validaci贸 de restriccions. |
Selectors Level 4 The definition of ':invalid' in that specification. |
Working Draft | Definici贸 inicial. |
Navegadors compatibles
BCD tables only load in the browser
Vegeu tamb茅
- Altres pseudo-classes relacionades amb la validaci贸:
:required
,:optional
,:valid
- Pseudo-classes relacionades amb Mozilla:
:-moz-ui-invalid
,:-moz-submit-invalid
- Validaci贸 de dades de formulari