:read-writeИ :read-onlyселекторы два Изменчивости псевдо-классы , направленные на создание формы укладки на основе disabled, readonlyи contenteditableHTML атрибутов. Хотя поддержка браузера не так уж плоха, различные реализации довольно шаткие.
Согласно официальным спецификациям CSS, :read-writeселектор будет соответствовать элементу, когда:
- это либо
inputкоторый имеетreadonlyниdisabledатрибутов. - это не
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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 36 | 3 * | Нет | 13 | 9 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 9,0-9,2 |
Есть большая разница между тем, что рекомендуется в спецификациях, и тем, что на самом деле делают браузеры. Например, если мы будем придерживаться спецификаций, каждый элемент, который может редактироваться пользователем, но отключен ( disabledили readonly) или просто не доступен для редактирования пользователем, должен быть выбран неквалифицированным :read-onlyселектором.
| Хром | Fire Fox | Сафари | Опера | |
|---|---|---|---|---|
input | :читай пиши | :читай пиши | :читай пиши | :читай пиши |
input(disabled) | :читай пиши | :читай пиши | :читай пиши | :читай пиши |
input(readonly) | : только для чтения | : только для чтения | : только для чтения | : только для чтения |
(contenteditable) | - | :читай пиши | - | : только для чтения |
* | - | : только для чтения | - | : только для чтения |
Между тем, похоже, только Firefox делает это, и, по-видимому, тоже не очень хорошо, поскольку он считает disabledвходные данные как :read-write. Что касается Opera, не помеченной как contenteditableэлемент :read-write, это просто потому, что она не поддерживает contenteditable.