CSS :read-write-Pseudoklasse

Der :read-write-Selektor wählt Elemente aus, die vom Benutzer bearbeitbar sind.

Zu den bearbeitbaren Elementen gehören:

<input>-Elemente, die nicht schreibgeschützt und nicht deaktiviert sind.
<textarea>, das weder schreibgeschützt noch deaktiviert ist.
Ein Element, das weder ein <input>- noch ein <textarea>-Element ist und bei dem das Attribut contenteditable festgelegt ist.

INFO

Die Browserunterstützung für die :read-write-Pseudoklasse variiert. Während der tatsächliche Bearbeitungsstatus des Elements gleich bleibt, wenden einige Browser die zugehörigen Stile möglicherweise nicht an oder behandeln die Pseudoklasse anders.

Der :read-only-Selektor ist das Gegenstück zum :read-write-Selektor. Er wählt alle Elemente aus, die nicht mit :read-write übereinstimmen.

Version

HTML5

Selectors Level 4

Syntax

CSS :read-write-Syntaxbeispiel

css

:read-write {
  css declarations;
}

Beispiel für den :read-write-Selektor:

CSS :read-write-Codebeispiel

html

<!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;
      }
      :read-write {
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>:read-write selector example</h2>
    <form>
      <div>
        <label for="read-write">Example1</label>
        <input value="read-write input" id="read-write" />
      </div>
      <div>
        <label for="read-only">Example2</label>
        <input readonly value="read-only input" id="read-only" />
      </div>
    </form>
  </body>
</html>

Try it Yourself »

Browserkompatibilität

Browser	Unterstützung
Chrome	Ja
Firefox	Ja
Safari	Ja
Edge	Ja
Opera	Ja

Praxis

Was können Sie im Abschnitt 'Lesen/Schreiben' auf W3Docs lernen?

So färben Sie den Hintergrund einer Webseite in CSSSo lesen und schreiben Sie CSS-DeklarationenGrundlagen von JavaScript und HTMLAllgemeine Syntax von CSS-RegelnSo integrieren Sie CSS in ein bestehendes HTML-Projekt

CSS :read-write-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :read-write-Selektor: ​