CSS :valid Pseudo-Klasse
Die CSS :valid Pseudo-Klasse trifft auf Formularelemente zu, deren Wert die Validierung besteht. Funktionsweise und Beispiele.
Die Pseudo-Klasse :valid trifft auf jedes Formularelement (z. B. <input>, <select> oder <textarea>) zu, dessen aktueller Wert die integrierte Constraint-Validierung des Elements besteht. Sie bietet eine rein CSS-basierte Möglichkeit, auf die Gültigkeit von Felddaten zu reagieren — ganz ohne JavaScript.
Ein Steuerelement wird von :valid erfasst, wenn es Validierungseinschränkungen hat und sein Wert alle davon erfüllt. Typische Auslöser sind:
- Ein
<input type="email">mit einer korrekt formatierten Adresse. - Ein
<input type="number">, dessen Wert innerhalb seinesmin/max-Bereichs liegt. - Ein Feld vom Typ
type="url",type="date"odertype="tel"mit wohlgeformten Daten. - Ein Feld mit einem
pattern-Attribut, dessen Wert dem regulären Ausdruck entspricht. - Ein
required-Feld, das nicht leer ist.
Diese Pseudo-Klasse ist das Gegenstück zu :invalid. Gemeinsam ermöglichen sie sofortiges visuelles Feedback während der Eingabe. Sie steht außerdem in engem Zusammenhang mit :required, :optional und :in-range.
Wichtige Hinweise
- Ein Steuerelement ohne jegliche Einschränkungen (z. B. ein einfaches
<input type="text">ohnerequired,patternoder Längenlimits) gilt immer als gültig — es trifft:validauch dann zu, wenn es leer ist. - Die Übereinstimmung wird live aktualisiert, während der Benutzer tippt, nicht erst beim Absenden des Formulars — Stile können also flackern, während jemand eingibt. Um das Feedback zu verzögern, kombiniert man es mit
:focusoder den Pseudo-Klassen:user-invalid/:user-valid. - Spezifität ist entscheidend:
input:validundinput:invalidhaben dieselbe Spezifität, daher gewinnt die Regel, die im Stylesheet später deklariert wird, bei Grenzfällen. Die Reihenfolge sollte bewusst gewählt sein.
Version
Syntax
CSS :valid Syntax
:valid {
css declarations;
}Beispiel des :valid-Selektors:
CSS :valid Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>Im gezeigten Beispiel verschwindet der graue Hintergrund, sobald eine ungültige E-Mail-Adresse eingegeben wird, da das Eingabefeld nicht mehr :valid entspricht.
Beispiel mit Pflichtfeldern und grüner Markierung
Ein verbreitetes Muster ist die Kombination von :valid und :invalid, sodass jedes Feld einen klaren „gut / noch nicht"-Status anzeigt. Hier werden Pflichtfelder grün, sobald sie gültige Daten enthalten, und rot, solange sie es nicht tun:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 6px 10px;
margin-bottom: 10px;
display: block;
border: 2px solid #cccccc;
}
input:valid {
border-color: #2eca6a;
}
input:invalid {
border-color: #e3382c;
}
</style>
</head>
<body>
<h2>Valid vs. invalid fields</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="number" min="1" max="10" placeholder="1 to 10" required />
</form>
</body>
</html>Da beide Felder required sind, entsprechen sie zunächst :invalid (leer) und wechseln zu :valid, sobald eine gültige E-Mail-Adresse und eine Zahl im Bereich 1–10 eingegeben werden.
Verwandte Pseudo-Klassen
:invalid— das genaue Gegenteil: trifft auf Steuerelemente zu, die die Validierung nicht bestehen.:requiredund:optional— trifft zu, je nachdem ob ein Steuerelement ein Pflichtfeld ist.:in-range— trifft auf numerische/Datumseingaben zu, deren Wert innerhalb vonmin/maxliegt.