Các :read-writevà :read-onlyselectors hai mutability pseudo-classes nhằm làm cho hình thức tạo kiểu tóc dễ dàng hơn dựa trên disabled, readonlyvà contenteditableHTML Attributes. Mặc dù hỗ trợ trình duyệt không phải là quá tệ, nhưng các triển khai khác nhau khá khó khăn.
Theo Thông số kỹ thuật CSS chính thức, một :read-writebộ chọn sẽ khớp với một phần tử khi:
- nó là một
inputmà córeadonlycũng nhưdisabledthuộc tính. - nó là
textareacái không córeadonlycũng khôngdisabled - nó là bất kỳ phần tử có thể chỉnh sửa nào khác (nhờ
contenteditablethuộc tính)
Cú pháp & Ví dụ
/* 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; )Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 36 | 3 * | Không | 13 | 9 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Có sự khác biệt lớn giữa những gì được đề xuất trong thông số kỹ thuật và những gì trình duyệt thực sự làm. Ví dụ: nếu chúng ta tuân theo các thông số kỹ thuật, mọi yếu tố người dùng có thể chỉnh sửa nhưng bị vô hiệu hóa ( disabledhoặc readonly) hoặc đơn giản là người dùng không thể chỉnh sửa sẽ được nhắm mục tiêu bởi một :read-onlybộ chọn không đủ tiêu chuẩn .
| Trình duyệt Chrome | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :đọc viết | :đọc viết | :đọc viết | :đọc viết |
input(disabled) | :đọc viết | :đọc viết | :đọc viết | :đọc viết |
input(readonly) | :chỉ đọc | :chỉ đọc | :chỉ đọc | :chỉ đọc |
(contenteditable) | - | :đọc viết | - | :chỉ đọc |
* | - | :chỉ đọc | - | :chỉ đọc |
Trong khi đó, chỉ có Firefox dường như làm như vậy và dường như cũng không quá tốt vì nó coi disabledđầu vào là :read-write. Về việc Opera không gắn thẻ một contenteditablephần tử là :read-write, đơn giản là vì nó không hỗ trợ contenteditable.