CSS :valid-Pseudoklasse
Die :valid-Pseudoklasse wählt Formularsteuerelemente (wie <input>, <select> und <textarea>) aus, deren Wert gemäß den Einstellungen des Elements validiert ist.
Der :valid-Selektor gilt für Formularsteuerelemente, die ihre Validierungsbedingungen erfüllen, wie <input>-Elemente mit min- und max-Attributen, E-Mail-Felder mit einer gültigen E-Mail-Adresse, Zahlenfelder mit einem numerischen Wert, URL- oder Datumsfelder mit gültigen Daten sowie Pflichtfelder mit einem nicht-leeren Wert.
Version
Syntax
CSS :valid-Syntax
css
:valid {
css declarations;
}Beispiel für den :valid-Selektor:
CSS :valid-Codebeispiel
html
<!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 obigen Beispiel verschwindet die Formatierung, wenn eine ungültige E-Mail-Adresse eingegeben wird.
Practice
Was ist die Verwendung und Funktion der CSS-Pseudoklasse 'valid'?