:read-writeІ :read-onlyселектори два Мінливості псевдо-класи , спрямовані на створення форми укладання на основі disabled, readonlyі contenteditableHTML атрибутів. Хоча підтримка браузера не така вже й погана, різні реалізації досить хиткі.
Відповідно до офіційних специфікацій CSS, :read-writeселектор буде відповідати елементу, коли:
- це або
inputякий не має,readonlyаніdisabledатрибути. - це a,
textareaщо не має ні,readonlyніdisabled - це будь-який інший редагований елемент (завдяки
contenteditableатрибуту)
Синтаксис та приклад
/* 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; )Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 36 | 3 * | Ні | 13 | 9 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Існує велика різниця між тим, що рекомендується в технічних характеристиках, і тим, що насправді роблять браузери. Наприклад, якщо ми дотримуємося специфікацій, кожен елемент, який можна редагувати користувачем, але вимкнути ( disabledабо readonly) або просто не редагувати користувачем, повинен бути націлений некваліфікованим :read-onlyселектором.
| Chrome | Firefox | Сафарі | Опера | |
|---|---|---|---|---|
input | :читати писати | :читати писати | :читати писати | :читати писати |
input(disabled) | :читати писати | :читати писати | :читати писати | :читати писати |
input(readonly) | :лише для читання | :лише для читання | :лише для читання | :лише для читання |
(contenteditable) | - | :читати писати | - | :лише для читання |
* | - | :лише для читання | - | :лише для читання |
Тим часом, схоже, це робить лише Firefox, і, мабуть, теж не надто добре, оскільки він вважає disabledвведення як :read-write. Що стосується того, що Opera не позначає contenteditableелемент як :read-write, це просто тому, що вона не підтримує contenteditable.