CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaft大全

CSS-Funktionen (Functions)CSS-Selektor大全

CSS :read-write selector

:read-write CSS pseudo-classes represent an element (such as an input element for editable text) that can be edited by the user.

Vollständiges Referenzhandbuch für CSS-Selektoren

Online-Beispiel

Wenn das input-Element nicht schreibgeschützt ist, d.h. es hat kein Attribut "readonly", wird der Stil des Eingabefeldes auf orange gesetzt:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grundlagen (oldtoolbag.com)</title>/title>　
<style>
input:read-write
{
　　　　background-color: orange;
}
input:-moz-read-write {
　　background-color: #bbf;
}
</style>
</head>
<body>
<h3> :read-Beispiel für write-Selektoren.</h3>
<p> Normales input-Element:<br><input value="hello"></p>
<p> Nur lesbarer input-Element:<br><input readonly value="hello"></p>
<p> :read-Der write-Selektor wählt Elemente ohne das Attribut "readonly" aus.</p>
</body>
</html>

Testen Sie es heraus ‹/›

Definition und Verwendung

:read-Der write-Selektor wird verwendet, um lesbare und editierbare Elemente zu matchen.

Beachtung: Momentan wird :read in den meisten Browsern unterstützt,-Der write-Selektor wird nur für input- und textarea-Elemente mit den Attributen input und textarea verwendet.

Browser-Kompatibilität

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

Selektor
:read-nur	Unterstützt	Nicht unterstützt	-moz-	Ja	Ja

CSS-Syntax

/*　Wählt alle editierbaren <input>-Elemente aus　*/
/*　Firefox erfordert Präfix　*/
input:-moz-read-write {
　　background-color: #bbf;
}
/*　In Blink unterstützt/WebKit/Edge ohne Präfix　*/
input:read-write {
　　background-color: #bbf;
}

Beachtung: Dieser Selektor wählt nicht nur <input>-Elemente aus, sondern auch alle Elemente, die vom Benutzer editiert werden können, z.B. <p>-Elemente mit dem Attribut contenteditable.