Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Selektoren/Pseudoklasse/valid, invalid

Aus SELFHTML-Wiki
< CSS‎ | Selektoren‎ | Pseudoklasse(Weitergeleitet von Invalid)
Wechseln zu: Navigation, Suche

Die Pseudoklassen :valid und :invalid selektieren Formularelemente danach, ob eine Eingabe valide (gültig, zulässig) oder invalide (ungültig) ist.

  • CSS 2.1
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
form > * {
      float: left;
}
label {
      clear: both;
      line-height: 2em;
      margin-right: 1em;
}
label::after { 
      content:": ";}
input:valid {
      color: green;
}
input:invalid {
      background-color: #e00;
}
<form>
     <label for="input1">Bitte etwas eingeben</label>
     <input id="input1" required>
     <label for="input2">Bitte eine ganze Zahl eingeben</label>
     <input id="input2" required type="number">
     <label for="input3">Bitte eine ganze Zahl zwischen 10 und 20 eingeben</label>
     <input id="input3" required type="number" min="10" max="20">
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von rot auf transparent und die Textfarbe auf grün, sobald etwas eingegeben wurde (Beispiel 1), die Eingabe dem vereinbarten Typ (Beispiel 2) oder dem Wertebereich von 10-20 (Beispiel 3) entspricht.
Beachten Sie: Die Browser haben ggf. noch weitere visuelle Hervorhebungen, insbesondere für die Pseudoklasse invalid, definiert. Dies kann zudem davon abhängig sein, ob sich die Elemente zur Eingabe innerhalb eines absendbaren Formulars befinden oder nicht.

Siehe auch[Bearbeiten]