CSS Referenzhandbuch

CSS @Regeln (RULES)

Vollständiges Verzeichnis der CSS-Eigenschaften

CSS-Funktionen (Functions)CSS-Selektor大全

CSS :invalid Selektor

:invalid CSS Pseudo-Klasse stellt jeden <input> oder andere <form>-Element dar, dessen Inhalt nicht überprüft wurde .

　Vollständiges Referenzhandbuch für CSS-Selektoren

Online-Beispiel

Wenn der Wert eines <input>-Elements ungültig ist, setzen Sie den Stil auf blau:

Beispiel

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>　
<style>
input:invalid
{
　　　　Rahmen:2px fester blauer Rand;
}
</style>
</head>
<body>
<h3> :invalid Selektorbeispiel demonstrieren.</h3>
<input type="email" value="supportEmail"　/>
<p>Bitte geben Sie eine gültige e-E-Mail-Adresse, um die Stiländerungen zu überprüfen.</p>
</body>
</html>

Testen Sie es heraus ‹/›

Definition und Verwendung

:invalid Selektoren werden verwendet, um eine bestimmte Stil zu setzen, wenn der Wert eines Formularelements ungültig ist.

Hinweis: 　:invalid Selektoren wirken nur auf Elemente, die einen spezifischen Wertebereich angeben können, z.B. min und max Eigenschaften von <input>-Elementen, sowie korrekte email-Felder, legale numerische Felder usw.

Browser-Kompatibilität

Die Zahlen in der Tabelle zeigen die erste Browser-Version an, die das Attribut unterstützt.

Selektor
:invalid	10.0	10.0	4.0	5.0	10.0

CSS- Syntax

/*　Man kann jeden ungültigen <input> auswählen　*/
input:invalid　{
　　background-color: rosa;
}

Dieser Pseudo-Klasse ist sehr nützlich, um Benutzerfehler in Feldern hervorzuheben.