:read-write

Eine Verwendung von readonly Formularsteuerelementen besteht darin, dem Benutzer zu ermöglichen, Informationen zu überprüfen und zu bestätigen, die er eventuell in einem früheren Formular eingegeben hat (zum Beispiel Versanddetails), während er in der Lage bleibt, die Informationen zusammen mit dem Rest des Formulars einzureichen. Wir tun genau dies im unten stehenden Beispiel.

Die :read-only Pseudoklasse wird verwendet, um alle Stile zu entfernen, die die Eingabefelder wie anklickbare Felder aussehen lassen, und sie stattdessen wie Nur-Lese-Absätze aussehen zu lassen. Die :read-write Pseudoklasse hingegen wird verwendet, um dem bearbeitbaren <textarea> ein ansprechenderes Styling zu verleihen.

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

Der vollständige Quellcode ist bei readonly-confirmation.html verfügbar; dieser wird wie folgt gerendert:

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 dem contenteditable-Attribut.

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

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

p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

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

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

• :read-only
• HTML contenteditable Attribut