O :read-writee :read-onlyseletores são dois mutabilidade pseudo-classes que visam tornar a forma styling mais fácil com base na disabled, readonlye contenteditableAtributos HTML. Embora o suporte do navegador não seja tão ruim, as várias implementações são bastante instáveis.
De acordo com as especificações oficiais de CSS, um :read-writeseletor corresponderá a um elemento quando:
- é um
inputquereadonlynão temdisabledatributos. - é um
textareaque não temreadonlynemdisabled - é qualquer outro elemento editável (graças ao
contenteditableatributo)
Sintaxe e Exemplo
/* 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; )Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 36 | 3 * | Não | 13 | 9 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Há uma grande diferença entre o que é recomendado nas especificações e o que os navegadores realmente fazem. Por exemplo, se seguirmos as especificações, cada elemento que é editável pelo usuário, mas desabilitado ( disabledou readonly) ou simplesmente não editável pelo usuário, deve ser direcionado por um :read-onlyseletor não qualificado .
| cromada | Raposa de fogo | Safári | Ópera | |
|---|---|---|---|---|
input | :ler escrever | :ler escrever | :ler escrever | :ler escrever |
input(disabled) | :ler escrever | :ler escrever | :ler escrever | :ler escrever |
input(readonly) | :somente leitura | :somente leitura | :somente leitura | :somente leitura |
(contenteditable) | - | :ler escrever | - | :somente leitura |
* | - | :somente leitura | - | :somente leitura |
Enquanto isso, apenas o Firefox parece fazer isso, e aparentemente não muito bem, uma vez que considera uma disabledentrada como :read-write. Em relação ao Opera não marcar um contenteditableelemento como :read-write, é simplesmente porque ele não oferece suporte contenteditable.