: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 July 2020.

A pseudo-classe CSS :read-write representa um elemento (como o input ou textarea) 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

Exemplos

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>.

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 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.

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;
}

Especificações

Specification
HTML
# selector-read-write
Selectors Level 4
# read-write-pseudo

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também