:read-write

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julho de 2020⁩.

Apseudo-classe CSS:read-write representa um elemento (como oinput outextarea) que é editável pelo usuário.

css

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

Sintaxe

Error: could not find syntax for this item

Ao utilizar os controles de formulárioreadonly 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ágrafosomente-leitura. A pseudo-classe:read-write(:leitura-escrita) por outro lado, é usado para fornecer um estilo mais agradável para a<textarea>.

css

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 emreadonly-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 comcontenteditable definido sobre ele.

html

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

css

p {  font-size: 150%;  padding: 5px;  border-radius: 5px;}p:read-only {  background-color: red;  color: white;}p:read-write {  background-color: lime;}