CSS :in-range Pseudo-Klasse
Die CSS-Pseudoklasse :in-range wählt Elemente aus, deren Wert innerhalb der durch min und max definierten Grenzen liegt. Mit Beispielen üben.
Die CSS-Pseudoklasse :in-range trifft auf ein <input>-Element zu, dessen aktueller Wert innerhalb des durch die Attribute min und max definierten Bereichs liegt. Sie ermöglicht es, ein Feld unterschiedlich zu gestalten, solange die Eingabe des Benutzers noch gültig ist, und gibt so sofortiges visuelles Feedback – ganz ohne eine einzige Zeile JavaScript.
Diese Seite erklärt, wann :in-range greift, für welche Eingabetypen es gilt, zeigt praktische Styling-Beispiele und erläutert, wie es sich zu den Validierungs-Pseudoklassen verhält, mit denen es kombiniert wird.
Wann der Selektor greift
:in-range ist nur für Formularsteuerelemente relevant, die einen Bereich ausdrücken können. Ein Steuerelement ist bereichsbegrenzt, wenn es eine min- und/oder max-Einschränkung akzeptiert. Hat ein Steuerelement keine solche Einschränkung, kann es weder „im Bereich" noch außerhalb des Bereichs sein – keine der beiden Pseudoklassen wird jemals darauf zutreffen.
:in-range funktioniert bei <input>-Elementen, die min/max unterstützen: type="number", type="range", type="date", type="month", type="week", type="time" und type="datetime-local". Ein Texteingabefeld, eine Checkbox oder ein Button ist niemals im Bereich.
Ein Feld ist im Bereich, wenn alle drei Bedingungen erfüllt sind:
- Der Eingabetyp unterstützt
min/max, - mindestens eines von
minodermaxist gesetzt, - der aktuelle Wert liegt zwischen den Grenzen (einschließlich).
Sobald der Wert eine Grenze überschreitet, trifft :in-range nicht mehr zu, und stattdessen greift :out-of-range. Die beiden Pseudoklassen schließen sich gegenseitig aus und eignen sich daher perfekt für ein „gültig/ungültig"-Styling.
Syntax
:in-range {
/* style declarations */
}In der Praxis wird es fast immer mit input (oder einem spezifischeren Selektor) kombiniert, um nur die gewünschten Steuerelemente anzusprechen:
input:in-range {
border-color: green;
}Ein In-Range-Eingabefeld stylen
Das folgende Beispiel umrandet ein Zahlenfeld, solange sein Wert zwischen 1 und 10 liegt. Ändern Sie den Wert im Editor auf 0 oder 15: Der Rahmenstil verschwindet, da das Feld nicht mehr im Bereich liegt.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>In-range mit out-of-range kombinieren
Da sich die beiden Zustände nie überschneiden, ist ein gängiges Muster, beide gleichzeitig zu stylen: grün, solange der Wert gültig ist, und rot, sobald er den erlaubten Bereich verlässt.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Kombination mit anderen Pseudo-Klassen
:in-range kann mit anderen Pseudo-Klassen verkettet werden – zum Beispiel :hover oder :focus –, um das Feedback weiter zu verfeinern:
input:in-range:focus {
outline: 2px solid green;
}Hinweise und Fallstricke
:in-rangespiegelt den aktuellen Wert wider, sodass der Stil live aktualisiert wird, während der Benutzer tippt oder einen Schieberegler bewegt.- Ein leeres Feld mit einem
min/maxgilt als im Bereich (es gibt keinen Wert, der die Grenze verletzt). Kombinieren Sie es daher mit:required, wenn ein leerer Wert als ungültig behandelt werden soll. minundmaxschränken hier nur das Styling ein – sie werden nach wie vor durch native Validierungs-Pseudoklassen wie:validund:invalidbeim Absenden des Formulars erzwungen.