A :read-writeés :read-onlyszelektor két mutability pszeudo-osztályok tételét célzó forma hajformázó könnyebb alapul disabled, readonlyés contenteditableHTML-attribútumok. Bár a böngésző támogatása nem is olyan rossz, a különféle megvalósítások meglehetősen nyersek.
A hivatalos CSS specifikációk szerint a :read-writeválasztó egy elemnek megfelel, ha:
- vagy an,
inputamelynekreadonlynincsenekdisabledattribútumai. - ez egy,
textareaamelynek nincs se,readonlysedisabled - ez bármilyen más szerkeszthető elem (az
contenteditableattribútumnak köszönhetően )
Szintaxis és példa
/* 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; )Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 36 | 3 * | Nem | 13. | 9. |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 9.0-9.2 |
Nagy különbség van a specifikációkban ajánlottak és a böngészők által ténylegesen végrehajtottak között. Például, ha ragaszkodunk a specifikációkhoz, akkor minden elemet, amely felhasználó által szerkeszthető, de le van tiltva ( disabledvagy readonly), vagy egyszerűen nem szerkeszthető, nem minősített :read-onlyválasztóval kell megcélozni .
| Króm | Firefox | Szafari | Opera | |
|---|---|---|---|---|
input | :ír olvas | :ír olvas | :ír olvas | :ír olvas |
input(disabled) | :ír olvas | :ír olvas | :ír olvas | :ír olvas |
input(readonly) | :csak olvasható | :csak olvasható | :csak olvasható | :csak olvasható |
(contenteditable) | - | :ír olvas | - | :csak olvasható |
* | - | :csak olvasható | - | :csak olvasható |
Eközben úgy tűnik, hogy csak a Firefox teszi ezt, és látszólag sem túl jól, mivel egy disabledinputot tekint :read-write. Ami azt illeti, hogy az Opera nem címkéz egy contenteditableelemet :read-write, egyszerűen azért, mert nem támogatja contenteditable.