:read-only

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-only CSS Pseudoklasse wählt Elemente aus (wie bestimmte <input>-Typen und <textarea>), die vom Benutzer nicht bearbeitet werden können. Elemente, auf die das HTML-Attribut readonly keine Wirkung hat (wie <input type="radio">, <input type="checkbox"> und alle anderen Nicht-Formularelemente), werden ebenfalls durch die :read-only Pseudoklasse ausgewählt. Tatsächlich stimmt :read-only mit allem überein, was :read-write nicht übereinstimmt, was es äquivalent zu :not(:read-write) macht.

Probieren Sie es aus

Syntax

css

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

Beispiele

Bestätigung von Formularinformationen mit read-only oder read-write Steuerelementen

Eine Verwendung von schreibgeschützten Formularsteuerelementen besteht darin, dem Benutzer die Überprüfung und Verifizierung der Informationen zu ermöglichen, die er möglicherweise in einem früheren Formular eingegeben hat (zum Beispiel Versanddetails), während er die Informationen zusammen mit dem Rest des Formulars einreichen kann. Genau das tun wir im folgenden Beispiel.

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

<form>
  <fieldset>
    <legend>Check shipping details</legend>
    <div>
      <label for="name">Name: </label>
      <input id="name" name="name" type="text" value="Mr Soft" readonly />
    </div>
    <div>
      <label for="address">Address: </label>
      <textarea id="address" name="address" readonly>
23 Elastic Way,
Viscous,
Bright Ridge,
CA
</textarea
      >
    </div>
    <div>
      <label for="postal-code">Zip/postal code: </label>
      <input
        id="postal-code"
        name="postal-code"
        type="text"
        value="94708"
        readonly />
    </div>
  </fieldset>

  <fieldset>
    <legend>Final instructions</legend>
    <div>
      <label for="sms-confirm">Send confirmation by SMS?</label>
      <input id="sms-confirm" name="sms-confirm" type="checkbox" />
    </div>
    <div>
      <label for="instructions">Any special instructions?</label>
      <textarea id="instructions" name="instructions"></textarea>
    </div>
  </fieldset>

  <div><button type="submit">Amend details and submit</button></div>
</form>

body {
  font-family: "Josefin Sans", sans-serif;
  margin: 20px auto;
  max-width: 460px;
}

fieldset {
  padding: 10px 30px 0;
  margin-bottom: 20px;
}

legend {
  color: white;
  background: black;
  padding: 5px 10px;
}

fieldset > div {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

button,
label,
input[type="text"],
textarea {
  display: block;
  font-family: inherit;
  font-size: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 5px;
  height: 30px;
}

input[type="text"],
textarea {
  width: 50%;
}

textarea {
  height: 110px;
  resize: none;
}

label {
  width: 40%;
}

input:hover,
input:focus,
textarea:hover,
textarea:focus {
  background-color: #eee;
}

button {
  width: 60%;
  margin: 20px auto;
}

css

input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: #ddd;
}

textarea:read-write {
  outline: 1px dashed red;
  outline-offset: 2px;
  border-radius: 5px;
}

Styling von schreibgeschützten Nicht-Formularsteuerelementen

Dieser Selektor wählt nicht nur <input>/<textarea>-Elemente aus – er wird jedes Element auswählen, das vom Benutzer nicht bearbeitet werden kann.

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 Standard # selector-read-only
Selectors Level 4 # rw-pseudos

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

:read-write
HTML-Attribut contenteditable