: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 July 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 {
  /* ... */
}

Beispiele

Bestätigung von Formularinformationen in schreibgeschützten/schreibfähigen Steuerelementen

Eine Verwendung von readonly Formularsteuerungselementen besteht darin, dem Benutzer die Möglichkeit zu geben, Informationen zu überprüfen und zu bestätigen, die er möglicherweise in einem früheren Formular eingegeben hat (zum Beispiel Versanddetails), während er dennoch in der Lage ist, die Informationen zusammen mit dem Rest des Formulars zu übermitteln. Genau das machen wir im folgenden Beispiel.

Die Pseudoklasse :read-only wird verwendet, um das gesamte Styling zu entfernen, das die Eingabefelder wie anklickbare Felder aussehen lässt, sodass sie eher wie schreibgeschützte Absätze aussehen. Die Pseudoklasse :read-write hingegen wird verwendet, um dem bearbeitbaren <textarea> ein schöneres Styling zu geben.

css
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

Den vollständigen Quellcode finden Sie unter readonly-confirmation.html; dies wird wie folgt gerendert:

Styling von schreibfähigen Nicht-Formularelementen

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 mit contenteditable darauf gesetzt.

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

<p>This paragraph is not editable; it is read-only.</p>
css
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

Spezifikationen

Specification
HTML
# selector-read-write
Selectors Level 4
# read-write-pseudo

Browser-Kompatibilität

Siehe auch