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/in-range, out-of-range

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

Die Pseudoklassen :in-range und :out-of-range selektieren Formularelemente danach, ob eine Eingabe inner- oder außerhalb der mit den Attributen min und max festgelegten Mindest- und Maximalwerten liegt. Diese Pseudoklasse gilt nur bei Elementen, bei denen eine Bereichsbegrenzung vorgenommen werden kann.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
input {
    border: 1px solid black;
}
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
    border: 2px solid red;
}
input:in-range + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
  <label for="alter">Ihr Alter ist: </label>
  <input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
  <span></span>
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von grün auf rot, sobald etwas außerhalb des Gültigkeitsbereichs eingegeben wurde. Sobald der eingegebene Wert wieder im Gültigkeitsbereich der Bereichsbegrenzung liegt, wird der Hintergrund wieder grün.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]