:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2020⁩.

Die :read-write CSS Pseudoklasse repräsentiert ein Element (wie input oder textarea), das vom Benutzer bearbeitet werden kann.

Probieren Sie es aus

label, input[type="submit"] { display: block; margin-top: 1em; } *:read-write { background-color: ivory; border: 2px solid darkorange; border-radius: 5px; }

<p>Please fill in your details:</p> <form> <label for="email">Email Address:</label> <input id="email" name="email" type="email" value="test@example.com" /> <label for="note">Short note about yourself:</label> <textarea id="note" name="note">Don't be shy</textarea> <label for="pic">Your picture:</label> <input id="pic" name="pic" type="file" /> <input type="submit" value="Submit form" /> </form>

Syntax

css

:read-write { /* ... */ }

Sie können readonly Formularsteuerungen verwenden, wenn ein Benutzer Informationen überprüfen soll, die er zuvor eingegeben hat und die zusammen mit neuen Daten in :read-write-Steuerungen übermittelt werden sollen. Im untenstehenden Beispiel wird die :read-only Pseudoklasse verwendet, damit das <textarea> (die Adresse eines Benutzers) wie ein normaler Absatz aussieht. Die :read-write Pseudoklasse bietet eine Möglichkeit, das bearbeitbare <textarea> (die Lieferanweisungen) hervorzuheben:

body { font-family: "Josefin Sans", sans-serif; margin: 10px auto; } legend { color: white; background: black; padding: 5px 10px; } fieldset > div { margin-bottom: 10px; display: flex; justify-content: space-between; } button, label, textarea { display: block; font-family: inherit; font-size: 100%; margin: 0; box-sizing: border-box; padding: 5px; height: 30px; } textarea { width: 50%; } textarea { height: 70px; resize: none; } label { width: 40%; }

css

textarea:read-only { border: 0; } textarea:read-write { box-shadow: inset 1px 1px 3px #cccccc; border-radius: 5px; }

html

<form> <fieldset> <legend>Confirm details</legend> <div> <label for="address">Address:</label> <textarea id="address" name="address" readonly> 123 Choco Mountain, Awesome Ridge, CA</textarea > </div> <div> <label for="instructions">Delivery instructions</label> <textarea id="instructions" name="instructions"></textarea> </div> </fieldset> <button type="submit">Confirm</button> </form>

Stilierung von schreibbaren Nicht-Formular-Steuerungen

Dieser Selektor wählt nicht nur <input>/<textarea>-Elemente aus - er wird jedes Element auswählen, das vom Benutzer bearbeitet werden kann, wie etwa ein <p>-Element mit der contenteditable Eigenschaft.

html

<p contenteditable>This paragraph is editable; it is read-write.</p> <p>This paragraph is not editable; it is read-only.</p>

css

body { font-family: sans-serif; } p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; }