:read-write / :read-only

Die Selektoren :read-write und :read-only sind zwei Mutabilitäts-Pseudoklassen, die darauf abzielen, das Styling von Formularen basierend auf den HTML-Attributen disabled, readonly und contenteditable zu vereinfachen. Obwohl die Browserunterstützung nicht schlecht ist, sind die verschiedenen Implementierungen recht eigenwillig.

Gemäß den offiziellen CSS-Spezifikationen wählt ein :read-write-Selektor ein Element aus, wenn

• es sich um ein input handelt, das weder das Attribut readonly noch disabled hat.
• es sich um ein textarea handelt, das weder readonly noch disabled hat
• es sich um ein beliebiges anderes editierbares Element handelt (dank des contenteditable-Attributs)

Syntax & Beispiel

/* Any element that is not writable */
:read-only { }

/* ... so you might want to scope it */
input:read-only, 
textarea:read-only,
[contenteditable]:read-only {
  cursor: not-allowed;
}

/* Any enabled text input 
   or enabled textarea 
   or element with the contenteditable attribute */
:read-write {
  background: white;
  cursor: text;
}

Browser-Unterstützung

Es gibt einen großen Unterschied zwischen dem, was in den Spezifikationen empfohlen wird, und dem, was die Browser tatsächlich tun. Wenn wir uns beispielsweise an die Spezifikationen halten, sollte jedes vom Benutzer editierbare, aber deaktivierte (disabled oder readonly) oder einfach nicht vom Benutzer editierbare Element von einem uneingeschränkten :read-only-Selektor angesprochen werden.

	Chrome	Firefox	Safari	Opera
input	:read-write	:read-write	:read-write	:read-write
input[disabled]	:read-write	:read-write	:read-write	:read-write
input[readonly]	:read-only	:read-only	:read-only	:read-only
[contenteditable]	—	:read-write	—	:read-only
*	—	:read-only	—	:read-only

Mittlerweile scheint nur Firefox dies zu tun, und offenbar auch nicht gut, da es ein disabled-Input als :read-write betrachtet. Dass Opera ein contenteditable-Element nicht als :read-write kennzeichnet, liegt einfach daran, dass es contenteditable nicht unterstützt.

Verwandt