`:read-write` CSS-Pseudoklasse

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

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-Formularelemente verwenden, wenn Sie möchten, dass ein Benutzer Informationen überprüft, die er zuvor eingegeben hat und die Sie zusammen mit neuen Daten in beschreibbaren Steuerelementen übermitteln möchten. Im folgenden Beispiel wird die :read-only-Pseudoklasse verwendet, um das <textarea> (eine Adresse des Benutzers) wie einen normalen Absatz aussehen zu lassen. 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>

[フレーム]

Styling von beschreibbaren Nicht-Formular-Steuerelementen

Dieser Selektor wählt nicht nur <input>/<textarea>-Elemente aus – er wählt jedes Element aus, das vom Benutzer bearbeitet werden kann, wie zum Beispiel ein <p>-Element, das die contenteditable-Eigenschaft gesetzt hat.

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;
}

[フレーム]