The :read-writedan :read-onlyselectors adalah dua kelas pseudo kebolehubahan yang bertujuan menjadikan gaya bentuk lebih mudah berdasarkan disabled, readonlydan contenteditableAtribut HTML. Walaupun sokongan penyemak imbas tidak seburuk itu, pelbagai pelaksanaannya agak membosankan.
Menurut Spesifikasi CSS rasmi, :read-writepemilih akan memadankan elemen apabila:
- ia sama ada
inputyang mempunyaireadonlyatau mempunyaidisabledsifat. - ia adalah
textareayang tidak mempunyai ataureadonlytidakdisabled - ia adalah unsur lain yang dapat diedit (terima kasih kepada
contenteditableatribut)
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; )Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 36 | 3 * | Tidak | 13 | 9 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Terdapat perbezaan utama antara apa yang disarankan dalam spesifikasi dan apa yang sebenarnya dilakukan oleh penyemak imbas. Sebagai contoh, jika kita berpegang pada spesifikasi, setiap elemen yang dapat diedit pengguna tetapi dinonaktifkan ( disabledatau readonly) atau tidak dapat diedit pengguna harus disasarkan 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) | :baca sahaja | :baca sahaja | :baca sahaja | :baca sahaja |
(contenteditable) | - | :baca tulis | - | :baca sahaja |
* | - | :baca sahaja | - | :baca sahaja |
Sementara itu, hanya Firefox yang nampaknya melakukannya, dan nampaknya tidak begitu baik kerana menganggap disabledinput sebagai :read-write. Mengenai Opera tidak menandai contenteditableelemen sebagai :read-write, itu hanya kerana tidak menyokong contenteditable.