:read-write

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

pseudo-classe CSS :read-write representa um elemento (como o input ou textarea) que é editável pelo usuário.

input:read-write, textarea:read-write {
  background-color: #bbf;
}

p:read-write {
  background-color: #bbf;
}

Sintaxe

:read-write

Examplos

Confirmando informações do formulário em controles read-only/read-write.

Ao utilizar os controles de formulário readonly permite que o usuário verifique e verifique as informações que eles podem ter inserido em um formulário anterior (por exemplo: Detalhes de envio), enquanto ainda pode enviar as informações junto com o resto do formulário. Nós fazemos exatamente isso no exemplo abaixo.

A pseudo-classe :read-only (:somente-leitura) é usada para remover todo o estilo que faz com que as entradas pareçam campos clicáveis, fazendo com que pareçam outro parágrafo somente-leitura. A pseudo-classe :read-write (:leitura-escrita) por outro lado, é usado para fornecer um estilo mais agradável para a <textarea>.

input:-moz-read-only, textarea:-moz-read-only,
input:read-only, textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

Você pode encontrar o código fonte completo em readonly-confirmation.html (disponível em inglês); isso torna assim:

Estilizar controle não formal de read-write.

Este seletor não seleciona apenas <input>/<textarea>  elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um <p> elemento com contenteditable definido sobre ele.

<p contenteditable>Este parágrafo é editável; é read-write.</p>

<p>Este parágrafo não é editável; é read-only.</p>
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

Especificações

Especificação Status Comentário
HTML Living Standard
The definition of ':read-write' in that specification.
Padrão em tempo real Nenhuma mudança.
HTML5
The definition of ':read-write' in that specification.
Recomendação Define a semântica em relação à validação de HTML e restrição.
Selectors Level 4
The definition of ':read-write' in that specification.
Rascunho atual Define a pseudo-classe, mas não a semântica associada.

Compatibilidade do navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:read-writeChrome Full support 1Edge Full support 13Firefox Full support 78
Full support 78
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 9Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4
Prefixed
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também