: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, bei denen das HTML-Attribut readonly keine Auswirkung hat (wie <input type="radio">, <input type="checkbox"> und alle anderen Nicht-Formularelemente), werden ebenfalls von der :read-only-Pseudoklasse ausgewählt. Tatsächlich stimmt :read-only mit allem überein, was :read-write nicht abdeckt, 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 Formular-Steuerelementen besteht darin, dem Benutzer zu ermöglichen, Informationen zu überprüfen und zu verifizieren, die er möglicherweise in einem früheren Formular eingegeben hat (z. B. Versanddetails), während er die Informationen dennoch zusammen mit dem Rest des Formulars senden kann. Genau dies wird im folgenden Beispiel demonstriert.

Die :read-only-Pseudoklasse wird verwendet, um das gesamte Styling zu entfernen, das die Eingabefelder wie klickbare Felder aussehen lässt, sodass sie eher wie schreibgeschützte Absätze wirken. Die :read-write-Pseudoklasse hingegen wird verwendet, um ein ansprechenderes Styling für das bearbeitbare <textarea> hinzuzufügen.

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

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
# selector-read-only
Selectors Level 4
# read-only-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:read-only

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch