Die :read-writeund :read-onlySelektoren sind zwei Veränderlichkeit Pseudo-Klassen des Ziel Form zu erleichtern , basierend auf Styling disabled, readonlyund contenteditableHTML - Attribute. Während die Browserunterstützung nicht so schlecht ist, sind die verschiedenen Implementierungen ziemlich wackelig.
Gemäß den offiziellen CSS-Spezifikationen entspricht ein :read-writeSelektor einem Element, wenn:
- es ist entweder ein
inputwas hatreadonlynochdisabledAttribute. - es ist ein
textareawas wederreadonlynoch hatdisabled - es ist jedes andere bearbeitbare Element (dank des
contenteditableAttributs)
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
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 36 | 3* | Nein | 13 | 9 |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Es gibt einen großen Unterschied zwischen den Empfehlungen in den Spezifikationen und den tatsächlichen Funktionen der Browser. Wenn wir uns beispielsweise an die Spezifikationen halten, sollte jedes Element, das vom Benutzer bearbeitet, aber deaktiviert ( disabledoder readonly) oder einfach nicht vom Benutzer bearbeitet werden kann, von einem nicht qualifizierten :read-onlySelektor ausgewählt werden.
| Chrom | Feuerfuchs | Safari | Oper | |
|---|---|---|---|---|
input | :lesen Schreiben | :lesen Schreiben | :lesen Schreiben | :lesen Schreiben |
input(disabled) | :lesen Schreiben | :lesen Schreiben | :lesen Schreiben | :lesen Schreiben |
input(readonly) | :schreibgeschützt | :schreibgeschützt | :schreibgeschützt | :schreibgeschützt |
(contenteditable) | - - | :lesen Schreiben | - - | :schreibgeschützt |
* | - - | :schreibgeschützt | - - | :schreibgeschützt |
In der Zwischenzeit scheint dies nur Firefox zu tun, und anscheinend auch nicht allzu gut, da es eine disabledEingabe als betrachtet :read-write. Wenn Opera ein contenteditableElement nicht als markiert :read-write, liegt dies einfach daran, dass es nicht unterstützt wird contenteditable.