Pseudo-klas invalid

Die pseudo-klas invalid spesifiseer 'n styl vir 'n invoerveld waar 'n ongeldige waarde ingevoer is, of 'n waarde wat nie ooreenstem met die gespesifiseerde tipe nie.

Sintaksis

cssselektor:invalid {

}

Voorbeeld

Kom ons verander die agtergrondkleur van die invoerveld na pienk, wanneer 'n ongeldige waarde ingevoer word, en terug na groen wanneer die waarde die tipekontrole geslaag het:

html<p>Sleutel jou e-posadres in</p>
<p><input type="email"></p>
cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

Sien ook

  • die pseudo-klas :valid,
    wat 'n styl spesifiseer vir 'n invoerveld met 'n geldige waarde
  • die pseudo-klas :default,
    wat 'n styl spesifiseer vir standaard elemente
  • die pseudo-klas :in-range,
    wat 'n styl spesifiseer vir elemente met 'n gespesifiseerde waarde-reeks
  • die pseudo-klas :out-of-range,
    wat 'n styl spesifiseer vir elemente wie se waardes buite die gespesifiseerde reeks val