:read-writeUn :read-onlyselektori ir divi mainība pseido-nodarbības, kuru mērķis ir padarīt formu stila vieglāk, pamatojoties uz disabled, readonlyun contenteditableHTML atribūti. Lai gan pārlūkprogrammas atbalsts nav tik slikts, dažādas ieviešanas iespējas ir diezgan grūtsirdīgas.
Saskaņā ar oficiālajām CSS specifikācijām :read-writeatlasītājs atbilst elementam, ja:
- tas ir vai nu
input, kas irreadonlynedisabledatribūti. - tas ir a
textareakuram nav nereadonlynedisabled - tas ir jebkurš cits rediģējams elements (pateicoties
contenteditableatribūtam)
Sintakse un piemērs
/* 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; )Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nē | 13 | 9 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 9.0-9.2 |
Pastāv liela atšķirība starp specifikācijās ieteikto un to, ko pārlūki faktiski dara. Piemēram, ja mēs pieturamies pie specifikācijām, katram elementam, kuru var rediģēt lietotājs, bet kurš ir atspējots ( disabledvai readonly) vai vienkārši nav rediģējams lietotājam, jābūt atlasītam nekvalificētam :read-onlyatlasītājam.
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :Lasīt rakstīt | :Lasīt rakstīt | :Lasīt rakstīt | :Lasīt rakstīt |
input(disabled) | :Lasīt rakstīt | :Lasīt rakstīt | :Lasīt rakstīt | :Lasīt rakstīt |
input(readonly) | :tikai lasīt | :tikai lasīt | :tikai lasīt | :tikai lasīt |
(contenteditable) | - | :Lasīt rakstīt | - | :tikai lasīt |
* | - | :tikai lasīt | - | :tikai lasīt |
Tikmēr šķiet, ka to dara tikai Firefox, un acīmredzot arī tas nav pārāk labi, jo tas uzskata, ka disabledieguldījums ir :read-write. Attiecībā uz Opera contenteditableelementa marķēšanu kā :read-writevienkārši tāpēc, ka tas neatbalsta contenteditable.