`:read-only` CSS-Pseudoklasse

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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die :read-only CSS Pseudoklasse wählt Elemente (wie bestimmte <input>-Typen und <textarea>), die vom Benutzer nicht bearbeitet werden können. Elemente, bei denen das HTML-Attribut readonly keine Wirkung hat (wie <input type="radio">, <input type="checkbox"> und alle anderen Nicht-Formularelemente), werden ebenfalls von der :read-only-Pseudoklasse ausgewählt. Tatsächlich passt :read-only auf alles, was nicht zu :read-write passt, was es äquivalent zu :not(:read-write) macht.

Probieren Sie es aus

label,
input[type="submit"] {
  display: block;
  margin-top: 1em;
}

*:read-only {
  font-weight: bold;
  color: indigo;
}

<p>Please fill 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-only {
  /* ... */
}

Beispiele

Bestätigen von Formularinformationen mit schreibgeschützten oder beschreibbaren Steuerelementen

Eine Verwendung von schreibgeschützten Formularsteuerelementen besteht darin, dem Benutzer zu erlauben, Informationen zu überprüfen und zu bestätigen, die er in einem früheren Formular eingegeben haben könnte (z.B. Versanddetails), während er dennoch die Informationen zusammen mit dem Rest des Formulars absenden 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, und sie mehr wie schreibgeschützte Absätze aussehen zu lassen. Die :read-write-Pseudoklasse wird hingegen verwendet, um dem bearbeitbaren <textarea> ein ansprechenderes Styling zu geben.

<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%;
  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: #eeeeee;
}

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

css

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

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

Styling von nicht bearbeitbaren Nicht-Formularsteuerungen

Dieser Selektor wählt nicht nur <input>/<textarea>-Elemente aus — er wählt jedes Element aus, 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

Spezifikation
HTML # selector-read-only
Selectors Level 4 # read-only-pseudo

Browser-Kompatibilität

Siehe auch

:read-write
HTML-Attribut contenteditable

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

:read-only CSS-Pseudoklasse

Help improve MDN

`:read-only` CSS-Pseudoklasse