CSS :read-write Pseudo-Klasse
Die CSS-Pseudo-Klasse :read-write wählt Elemente aus, die vom Benutzer bearbeitbar sind. Lernen Sie die Pseudo-Klasse mit Beispielen kennen.
Die CSS-Pseudo-Klasse :read-write trifft auf jedes Element zu, das der Benutzer bearbeiten kann, beispielsweise ein Textfeld, in das er tippen kann. Sie ist eine Benutzeraktions-/Eingabe-Pseudo-Klasse: Sie wählt Elemente anhand ihres aktuellen bearbeitbaren Zustands aus – nicht anhand eines Tag-Namens oder einer Klasse – sodass Sie „das Feld, in das der Besucher schreiben kann" stylen können, ohne zusätzliches Markup hinzuzufügen.
Diese Seite erläutert, was als Read-Write-Element gilt, die Syntax, ein praktisches Beispiel, das Read-Only-Gegenstück und wie :read-write im Zusammenhang mit verwandten Formular-Pseudo-Klassen einzuordnen ist.
Was als Read-Write gilt
Ein Element trifft auf :read-write zu, wenn es aktuell bearbeitbar ist. Dazu gehören:
<input>-Elemente, deren Typ Text akzeptiert (text, search, url, email, password, number usw.), die nichtreadonlyund nichtdisabledsind.<textarea>-Elemente, die wederreadonlynochdisabledsind.- Jedes andere Element, das das Attribut
contenteditableträgt (z. B. ein<div contenteditable>), das ansonsten statischen Inhalt bearbeitbar macht.
Der entgegengesetzte Fall – ein deaktiviertes Feld, ein readonly-Feld oder ein nicht bearbeitbares Element wie ein Absatz – trifft stattdessen auf :read-only zu. Jedes Element ist entweder das eine oder das andere, sodass :read-only und :read-write zusammen das gesamte Dokument abdecken.
Wann es verwendet werden sollte
Verwenden Sie :read-write, wenn Sie einen visuellen Hinweis darauf geben möchten, dass ein Element interaktiv ist:
- Geben Sie bearbeitbaren Feldern einen auffälligen Hintergrund oder Rahmen, damit Benutzer sofort sehen, wo sie tippen können.
- Kombinieren Sie es mit
:read-only, um gesperrte Felder auszugrauen (beispielsweise ein Profilformular, bei dem die E-Mail-Adresse fest ist, aber der Anzeigename bearbeitbar ist). - Stylen Sie einen
contenteditable-Rich-Text-Bereich genauso wie native Eingaben für ein einheitliches Erscheinungsbild.
Die Browser-Unterstützung für die Pseudo-Klasse :read-write ist in modernen Browsern weit verbreitet, jedoch kann das Styling-Verhalten variieren. Der tatsächliche bearbeitbare Zustand eines Elements ist immer korrekt – :read-write steuert nur, ob Ihre Stile angewendet werden – verlassen Sie sich daher nie auf sie für mehr als die Darstellung.
Der :read-only-Selektor ist das Gegenstück zum :read-write-Selektor. Er wählt jedes Element aus, das nicht auf :read-write zutrifft.
Version
Syntax
CSS :read-write Syntaxbeispiel
:read-write {
css declarations;
}Hier sind css declarations die Stilregeln, die auf jedes bearbeitbare Element auf der Seite angewendet werden. Normalerweise schränken Sie die Regel ein (zum Beispiel input:read-write), damit sie nicht auch contenteditable-Bereiche erfasst, die Sie lieber unverändert lassen möchten.
Beispiel des :read-write-Selektors
Im folgenden Beispiel ist das erste Input-Feld bearbeitbar, daher wird es über :read-write grün eingefärbt. Das zweite Input-Feld ist readonly, weshalb die :read-only-Regel greift und es ausgegraut wird.
CSS :read-write Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
:read-write {
background: lightgreen;
}
</style>
</head>
<body>
<h2>:read-write selector example</h2>
<form>
<div>
<label for="read-write">Example1</label>
<input value="read-write input" id="read-write" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Styling eines contenteditable-Bereichs
:read-write ist nicht auf Formularfelder beschränkt. Jedes Element mit dem Attribut contenteditable wird bearbeitbar und trifft daher auf :read-write zu, sodass Sie ihm die gleiche visuelle Kennzeichnung wie einem echten Input geben können:
<!DOCTYPE html>
<html>
<head>
<title>contenteditable + :read-write</title>
<style>
div:read-write {
border: 1px dashed #4caf50;
padding: 8px;
outline: none;
}
</style>
</head>
<body>
<p>Click the box below and start typing:</p>
<div contenteditable>This text is editable.</div>
</body>
</html>Da das <div> contenteditable trägt, gilt die Regel div:read-write und das Feld erhält den gestrichelten Rahmen. Entfernen Sie das Attribut, trifft die Regel nicht mehr zu.
Browser-Kompatibilität
| Browser | Unterstützung |
|---|---|
| Chrome | Ja |
| Firefox | Ja |
| Safari | Ja |
| Edge | Ja |
| Opera | Ja |
Verwandte Selektoren
:read-only— das Gegenstück, das jedes nicht bearbeitbare Element trifft.:disabledund:enabled— wählen Formularsteuerelemente anhand ihres deaktivierten Zustands aus.:requiredund:optional— wählen Inputs danach aus, ob sie ausgefüllt werden müssen.