The :read-writedan :read-onlypenyeleksi adalah dua hal berubah-ubah pseudo-kelas bertujuan membuat bentuk styling lebih mudah berdasarkan disabled, readonlydan contenteditableHTML Atribut. Meskipun dukungan peramban tidak terlalu buruk, berbagai penerapannya cukup miring.
Menurut Spesifikasi CSS resmi, :read-writepemilih akan mencocokkan elemen ketika:
- itu bisa berupa an
inputyang memilikireadonlyataudisabledatribut. - itu adalah
textareayang tidak memilikireadonlyataudisabled - itu adalah elemen lain yang dapat diedit (berkat
contenteditableatributnya)
Sintaks & Contoh
/* 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; )Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 36 | 3 * | Tidak | 13 | 9 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Ada perbedaan besar antara apa yang direkomendasikan dalam spesifikasi dan apa yang sebenarnya dilakukan browser. Misalnya, jika kita tetap berpegang pada spesifikasi, setiap elemen yang dapat diedit pengguna tetapi dinonaktifkan ( disabledatau readonly) atau yang tidak dapat diedit pengguna harus ditargetkan oleh :read-onlypemilih yang tidak memenuhi syarat .
| Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :Baca tulis | :Baca tulis | :Baca tulis | :Baca tulis |
input(disabled) | :Baca tulis | :Baca tulis | :Baca tulis | :Baca tulis |
input(readonly) | : hanya baca | : hanya baca | : hanya baca | : hanya baca |
(contenteditable) | - | :Baca tulis | - | : hanya baca |
* | - | : hanya baca | - | : hanya baca |
Sementara itu, hanya Firefox yang tampaknya melakukannya, dan tampaknya juga tidak terlalu baik karena menganggap disabledinput sebagai :read-write. Mengenai Opera tidak menandai sebuah contenteditableelemen sebagai :read-write, itu hanya karena itu tidak mendukung contenteditable.