CSS :out-of-range Pseudo-Klasse
Die CSS-Pseudo-Klasse :out-of-range wählt Elemente aus, deren Wert außerhalb der durch min und max definierten Grenzen liegt. Mit Beispielen üben.
Die :out-of-range CSS-Pseudo-Klasse trifft auf ein Formulareingabefeld zu, dessen aktueller Wert außerhalb des erlaubten Bereichs liegt, der durch seine min- und/oder max-Attribute definiert ist. Sie ermöglicht es, dem Benutzer sofortiges visuelles Feedback zu geben — einen roten Rahmen, eine Warnfarbe, einen Hinweistext — in dem Moment, in dem er eine zu kleine oder zu große Zahl eingibt, ganz ohne JavaScript.
Diese Seite erklärt genau, auf welche Elemente :out-of-range angewendet wird, wie sie sich von :in-range und :invalid unterscheidet, und zeigt ausführbare Beispiele, die Sie kopieren können.
:out-of-range trifft nur auf <input>-Elemente zu, die ein min- und/oder max-Attribut haben und Bereichsbeschränkungen unterstützen — also type="number", type="range" sowie die Datums- und Zeittypen (date, month, week, time, datetime-local). Bei allen anderen Eingabetypen trifft sie nie zu.
Wann die Pseudo-Klasse zutrifft
Eine Eingabe gilt als „außerhalb des Bereichs", wenn alle folgenden Bedingungen erfüllt sind:
- Sie hat ein
min- und/odermax-Attribut. - Sie enthält aktuell einen Wert, den der Browser parsen kann.
- Dieser Wert ist kleiner als
minoder größer alsmax.
Ein paar Dinge, die man sich merken sollte:
- Leere Eingaben treffen nie zu. Ohne Wert gibt es nichts zu vergleichen, daher ist
:out-of-rangefalse(und:in-rangeebenfallsfalse). - Es geht ausschließlich um den numerischen/Datums-Bereich. Eine
step-Abweichung (zum Beispiel1.5beistep="1") macht die Eingabe:invalid, aber nicht:out-of-range. - Die Pseudo-Klasse aktualisiert sich in Echtzeit, während der Benutzer das Feld bearbeitet, sodass Stile in Echtzeit umgeschaltet werden.
Version
Syntax
:out-of-range {
/* css declarations */
}Sie werden sie fast immer zur besseren Übersichtlichkeit mit dem Eingabetyp kombinieren:
input:out-of-range {
border: 3px solid #d9534f;
}Beispiel für den :out-of-range-Selektor
Das folgende Eingabefeld akzeptiert Monate von 1–12, startet aber mit dem Wert 15, sodass der Rahmen beim Laden hervorgehoben wird. Ändern Sie den Wert auf eine Zahl zwischen 1 und 12 und die Hervorhebung verschwindet.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>:out-of-range mit :in-range kombinieren
:out-of-range und :in-range sind Gegenteile: Höchstens eine von beiden trifft gleichzeitig zu, und bei einer leeren Eingabe trifft keine von beiden zu. Das Styling beider Zustände ergibt eine vollständige „gültiger Wert / ungültiger Wert"-Oberfläche:
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range vs. :invalid
Diese beiden werden häufig verwechselt. :invalid ist die umfassendere Regel — sie trifft auf jede fehlgeschlagene Einschränkung zu, einschließlich eines fehlenden required-Werts, einer fehlerhaften E-Mail-Adresse oder einer step-Abweichung. :out-of-range ist enger gefasst: Sie trifft nur zu, wenn ein Wert unter min oder über max liegt.
Ein Wert, der außerhalb des Bereichs liegt, ist auch ungültig, daher trifft :invalid ebenfalls zu. Verwenden Sie :out-of-range, wenn Sie dem Benutzer gezielt mitteilen möchten „diese Zahl ist zu groß/klein", anstatt einen allgemeinen Fehler anzuzeigen. Siehe :invalid und :valid für die umfassenderen Validierungs-Pseudo-Klassen.
:out-of-range gestaltet das Feld, hält aber das Absenden des Formulars von sich aus nicht auf. Kombinieren Sie es mit der eingebauten Validierung (der Browser blockiert das Absenden eines außerhalb des Bereichs liegenden Werts, wenn min/max gesetzt sind) oder serverseitigen Prüfungen. Verlassen Sie sich für die Datenintegrität niemals allein auf CSS.
Verwandte Pseudo-Klassen
:in-range— das Gegenteil dieses Selektors.:validund:invalid— treffen auf die allgemeine Gültigkeit von Formularsteuerelementen zu.:requiredund:optional— treffen auf dasrequired-Attribut zu.