CSS-Pseudoklasse `:read-write`

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Pseudoklasse :read-write steht für ein Element (z. B. input oder textarea), das von Benutzern bearbeitet werden kann.

Probieren Sie es aus

label {
  display: block;
  margin-top: 1em;
}

*:read-write {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

<p>Please fill in your details:</p>

<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" />

Syntax

css

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

Sie können Formularsteuerelemente mit dem Attribut readonly verwenden, wenn Benutzer zuvor eingegebene Angaben überprüfen sollen, die zusammen mit neuen Daten aus bearbeitbaren Steuerelementen übermittelt werden. Im folgenden Beispiel lässt die Pseudoklasse :read-only das <textarea> (die Adresse eines Benutzers) wie einen normalen Absatz aussehen. Mit der Pseudoklasse :read-write wird das bearbeitbare <textarea> (die Lieferanweisungen) hervorgehoben:

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

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

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

Bearbeitbare Elemente außerhalb von Formularen gestalten

Dieser Selektor wählt nicht nur <input>- und <textarea>-Elemente aus, sondern jedes Element, das von Benutzern bearbeitet werden kann, beispielsweise ein <p>-Element, für das contenteditable festgelegt ist.

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