В :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, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| 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.