Den :read-writeoch :read-onlyväljare är två föränderlighet pseudo-klasser som syftar till att göra formulär styling lättare bygger på disabled, readonlyoch contenteditableHTML-attribut. Medan webbläsarstödet inte är så dåligt är de olika implementeringarna ganska otäcka.
Enligt de officiella CSS-specifikationerna kommer en :read-writeväljare att matcha ett element när:
- det är antingen ett
inputsom harreadonlyellerdisabledattribut. - det är en
textareasom varken harreadonlyellerdisabled - det är något annat redigerbart element (tack vare
contenteditableattributet)
Syntax och exempel
/* 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; )Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 36 | 3 * | Nej | 13 | 9 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Det är en stor skillnad mellan vad som rekommenderas i specifikationerna och vad webbläsarna faktiskt gör. Till exempel, om vi håller oss till specifikationerna, bör varje element som är användarredigerbart men inaktiverat ( disabledeller readonly) eller helt enkelt inte användarredigerbart riktas mot en okvalificerad :read-onlyväljare.
| Krom | Firefox | Safari | Opera | |
|---|---|---|---|---|
input | :läsa skriva | :läsa skriva | :läsa skriva | :läsa skriva |
input(disabled) | :läsa skriva | :läsa skriva | :läsa skriva | :läsa skriva |
input(readonly) | : skrivskyddad | : skrivskyddad | : skrivskyddad | : skrivskyddad |
(contenteditable) | - | :läsa skriva | - | : skrivskyddad |
* | - | : skrivskyddad | - | : skrivskyddad |
Under tiden verkar bara Firefox göra det, och uppenbarligen inte så bra heller eftersom det anser att en disabledinmatning är som :read-write. När det gäller Opera som inte märker ett contenteditableelement som :read-write, är det helt enkelt för att det inte stöder contenteditable.