W3docs
de
Anmelden

CSS :read-only Pseudo-Klasse

Die :read-only CSS-Pseudoklasse wählt Elemente aus, die nicht bearbeitbar sind. Lernen Sie die Pseudoklasse kennen und probieren Sie Beispiele aus.

Die CSS-Pseudoklasse :read-only trifft auf jedes Element zu, das der Benutzer nicht bearbeiten kann. Sie ist das genaue Gegenteil von :read-write: Jedes Element wird von einer der beiden Pseudoklassen erfasst, niemals von beiden gleichzeitig. Verwenden Sie sie, um schreibgeschützten Feldern ein unverwechselbares Aussehen zu geben — zum Beispiel einen gedämpften Hintergrund —, damit Benutzer sofort erkennen, welche Eingabefelder sie ändern können.

Beispiel für den read-only-Selektor

Was als bearbeitbar gilt

Ein Element ist bearbeitbar (und wird daher von :read-write und nicht von :read-only erfasst), wenn es eines der folgenden ist:

  • Ein <input>-Element, das weder das Attribut readonly noch das Attribut disabled besitzt.
  • Ein <textarea>, das weder das Attribut readonly noch das Attribut disabled besitzt.
  • Jedes andere Element, bei dem das Attribut contenteditable auf true gesetzt ist.

Alles andere ist schreibgeschützt, sodass :read-only ein Element trifft, wenn:

  • es ein <input> oder <textarea> mit dem Attribut readonly ist, oder
  • es ein einfaches Element ist, dessen Attribut contenteditable auf false gesetzt oder nicht vorhanden ist (der größte Teil der Seite — Absätze, Überschriften, Divs und so weiter).

Eine häufige Überraschung: Ein readonly-Attribut bei einem <div> oder <p> hat keine Wirkung, da readonly nur auf Formularelemente anwendbar ist. Ein solches Element wird von :read-only erfasst, weil es von Haus aus nicht bearbeitbar ist — nicht wegen des Attributs readonly. Um ein Nicht-Formularelement bearbeitbar zu machen, verwenden Sie contenteditable="true".

:read-only kann mit anderen Selektoren verkettet werden (wie :hover) und mit Pseudo-Elementen kombiniert werden (wie ::after).

Version

CSS Basic User Interface Module Level 3

Disabled Elements — HTML5

Syntax

CSS :read-only Syntax

:read-only {
  css declarations;
}

Beispiel des :read-only-Selektors:

CSS :read-only Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 5px;
      }
      input:read-only {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <form>
      <div>
        <label for="normal">Example1</label>
        <input value="normal input" id="normal" />
      </div>
      <div>
        <label for="read-only">Example2</label>
        <input readonly value="read-only input" id="read-only" />
      </div>
    </form>
  </body>
</html>
Probier es selbst »

Das aufzählbare Attribut contenteditable gibt an, ob der Benutzer das Element bearbeiten kann. Wenn es aktiviert ist, wird das Browser-Widget so modifiziert, dass eine Bearbeitung möglich ist. Das Attribut sollte einen der folgenden Werte haben:

  • true (oder die leere Zeichenkette), was angibt, dass das Element bearbeitbar sein soll;
  • false, was angibt, dass das Element nicht bearbeitbar sein soll.

Beispiel des :read-only-Selektors mit dem contenteditable-Attribut:

Beispiel der CSS :read-only-Pseudoklasse mit dem contenteditable-Attribut

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:read-only {
        background: #8ebf42;
      }
      p[contenteditable="true"] {
        color: #777777;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <p>Example of a normal paragraph.</p>
    <p contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</p>
  </body>
</html>
Probier es selbst »

Beispiel des :read-only-Selektors mit dem HTML-Tag <textarea> beim Hover:

Beispiel des CSS :read-only-Selektors mit dem HTML-Tag <textarea> und Hover-Zustand

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea:read-only {
        background: #ffffff;
      }
      textarea:read-only:hover {
        cursor: not-allowed;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <textarea cols="40" rows="5" readonly>Here is an example of :read-only selector on hover.</textarea>
  </body>
</html>
Probier es selbst »

Beispiel des :read-only-Selektors mit dem HTML-Tag <div> und den Pseudo-Elementen :after und :before:

Beispiel der CSS :read-only-Pseudoklasse mit den Pseudo-Elementen :before und :after

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:read-only:hover {
        background-color: #eee;
      }
      div:read-only:before,
      div:read-only:after {
        content: " / ";
        padding: 10px;
        color: #1c87c9;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>:read-only selector example</h2>
    <div readonly>Here is an example of :read-only selector on hover.</div>
    <br />
    <div contenteditable="true">Example of a contenteditable paragraph! Just click and edit!</div>
  </body>
</html>
Probier es selbst »

Übung

Übung
Was wählt die CSS :read-only-Pseudoklasse aus?
Was wählt die CSS :read-only-Pseudoklasse aus?
Was this page helpful?