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

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

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