MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:invalid

This translation is incomplete. Please help translate this article from English.

Sumari

La pseudo-classe CSS :invalid representa qualsevol element <input> o <form> en què el seu contingut no es pot validar d'acord amb la configuració del tipus d'entrada. Això permet, fàcilment, que els camps no vàlids adoptin un aspecte que ajuda a l'usuari a identificar i corregir errors.

Per defecte, Gecko no aplica un estil a la pseudo-classe :invalid. No obstant això, sí s'aplica un estil (un vermell "brillant" utilitzant la propietat box-shadow) a la pseudo-classe :-moz-ui-invalid, que aplica en un subconjunt de casos per :invalid.

Es pot desactivar la brillantor mitjançant el següent CSS, o anul·lar-la completament per alterar l'aspecte dels camps no vàlids.

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

Sintaxi

:invalid { style properties }

Notes

Botons Radio

Si es requereix qualsevol dels botons de radio d'un grup (és a dir, amb el mateix valor que el seu atribut name), la pseudo-classe :invalid s'aplicarà a tots si no se selecciona cap dels botons del grup.

Exemple

Aquest exemple presenta un formulari senzill en que el color dels elements és verd quan es validen i vermell quan no ho fan.

Contingut HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

Contingut 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;
}

Especificacions

Especificació Estat Comentari
WHATWG HTML Living Standard
The definition of ':invalid' in that specification.
Living Standard Sense canvis.
HTML5
The definition of ':invalid' in that specification.
Recommendation Defineix la semàntica pel que fa a la validació d'HTML i restriccions.
Selectors Level 4
The definition of ':invalid' in that specification.
Working Draft Sense canvis.
CSS Basic User Interface Module Level 3
The definition of ':invalid' in that specification.
Candidate Recommendation Defineix la pseudo-classe, però no la semàntica associada.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (<input>) 10.0 4.0 (2) 10 10.0 5.0
Aplicar-ho a <form> ? 13 (13) ? ? ?
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? 4.0 (2) No support 10.0 5.0
Aplicar-ho a <form> ? 13.0 (13) ? ? ?

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,