:read-writeI :read-onlyselektora su dva promjenljivost pseudo-klase usmjerenih na stvaranje obrasca styling lakše temelju disabled, readonlyi contenteditableHTML atributi. Iako podrška preglednika nije toliko loša, razne su implementacije prilično neskladne.
Prema službenim CSS specifikacijama, :read-writeselektor će odgovarati elementu kada:
- to je ili
inputkoje imareadonlynitidisabledatribute. - to je
textareakoje nemareadonlynitidisabled - to je bilo koji drugi element koji se može uređivati (zahvaljujući
contenteditableatributu)
Sintaksa i primjer
/* 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; )Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 36 | 3 * | Ne | 13 | 9 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Velika je razlika između preporučenog u specifikacijama i onoga što preglednici zapravo rade. Na primjer, ako se pridržavamo specifikacija, svaki nekvalificirani selektor treba ciljati svaki element koji je moguće uređivati, ali onemogućiti ( disabledili readonly) ili jednostavno ne može uređivati korisnik :read-only.
| Krom | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | : čitanje-pisanje | : čitanje-pisanje | : čitanje-pisanje | : čitanje-pisanje |
input(disabled) | : čitanje-pisanje | : čitanje-pisanje | : čitanje-pisanje | : čitanje-pisanje |
input(readonly) | :samo za čitanje | :samo za čitanje | :samo za čitanje | :samo za čitanje |
(contenteditable) | - | : čitanje-pisanje | - | :samo za čitanje |
* | - | :samo za čitanje | - | :samo za čitanje |
U međuvremenu, čini se da to čini samo Firefox, a očito ni previše dobro jer disabledunos smatra :read-write. S obzirom na to da Opera ne označava contenteditableelement kao :read-write, to je jednostavno zato što ne podržava contenteditable.