CSS :read-write Pseudo Classe
A pseudo-classe CSS :read-write seleciona elementos editáveis pelo usuário. Aprenda sobre ela e pratique com exemplos.
A pseudo-classe CSS :read-write corresponde a qualquer elemento que o usuário possa editar, como um campo de texto onde ele pode digitar. É uma pseudo-classe de ação do usuário / entrada: ela seleciona elementos com base em seu estado editável atual, e não em um nome de tag ou classe, permitindo estilizar "a caixa em que o visitante pode escrever" sem adicionar marcação extra.
Esta página aborda o que conta como elemento de leitura e escrita, a sintaxe, um exemplo funcional, o seletor oposto de somente leitura e como :read-write se relaciona com pseudo-classes de formulário afins.
O que conta como leitura e escrita
Um elemento corresponde a :read-write quando está atualmente editável. Isso inclui:
- Elementos
<input>cujo tipo aceita texto (text, search, url, email, password, number, etc.) que não sejamreadonlye não sejamdisabled. - Elementos
<textarea>que não sejamreadonlynemdisabled. - Qualquer outro elemento que possua o atributo
contenteditable(por exemplo, um<div contenteditable>), tornando conteúdo estático editável.
O caso oposto — um campo desativado, um campo readonly ou qualquer elemento não editável, como um parágrafo — corresponde a :read-only. Todo elemento é um ou outro, portanto :read-only e :read-write juntos cobrem o documento inteiro.
Quando usar
Use :read-write quando quiser uma dica visual de que um elemento é interativo:
- Dê aos campos editáveis um fundo ou borda distinto para que os usuários vejam imediatamente onde podem digitar.
- Combine com
:read-onlypara desvanecer campos bloqueados (por exemplo, um formulário de perfil onde o e-mail é fixo mas o nome de exibição é editável). - Estilize uma região de texto rico
contenteditableda mesma forma que entradas nativas para uma aparência consistente.
O suporte a navegadores para a pseudo-classe :read-write é amplo nos navegadores modernos, mas o comportamento de estilização pode diferir. O estado editável real do elemento é sempre correto — :read-write controla apenas se seus estilos são aplicados — portanto, nunca confie nela para nada além de apresentação visual.
O seletor :read-only é o oposto do seletor :read-write. Ele seleciona todos os elementos que não correspondem a :read-write.
Versão
Sintaxe
Exemplo de sintaxe CSS :read-write
:read-write {
css declarations;
}Aqui css declarations são as regras de estilo a aplicar a todos os elementos editáveis da página. Normalmente você escopa a regra (por exemplo input:read-write) para não capturar também regiões contenteditable que prefere deixar sem estilo.
Exemplo do seletor :read-write
No exemplo abaixo, o primeiro input é editável, portanto fica verde via :read-write. O segundo input é readonly, portanto cai na regra :read-only e fica acinzentado.
Exemplo de código CSS :read-write
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
}
input:read-only {
background-color: #ccc;
}
:read-write {
background: lightgreen;
}
</style>
</head>
<body>
<h2>:read-write selector example</h2>
<form>
<div>
<label for="read-write">Example1</label>
<input value="read-write input" id="read-write" />
</div>
<div>
<label for="read-only">Example2</label>
<input readonly value="read-only input" id="read-only" />
</div>
</form>
</body>
</html>Estilizando uma região contenteditable
:read-write não se limita a campos de formulário. Qualquer elemento com o atributo contenteditable torna-se editável e, portanto, corresponde a :read-write, permitindo aplicar o mesmo visual de um input real:
<!DOCTYPE html>
<html>
<head>
<title>contenteditable + :read-write</title>
<style>
div:read-write {
border: 1px dashed #4caf50;
padding: 8px;
outline: none;
}
</style>
</head>
<body>
<p>Click the box below and start typing:</p>
<div contenteditable>This text is editable.</div>
</body>
</html>Como o <div> possui contenteditable, a regra div:read-write é aplicada e a caixa recebe a borda tracejada. Remova o atributo e a regra deixa de corresponder.
Compatibilidade com Navegadores
| Navegador | Suporte |
|---|---|
| Chrome | Sim |
| Firefox | Sim |
| Safari | Sim |
| Edge | Sim |
| Opera | Sim |
Seletores relacionados
:read-only— o oposto, que corresponde a todos os elementos não editáveis.:disablede:enabled— correspondem a controles de formulário pelo estado desativado.:requirede:optional— correspondem a inputs conforme precisem ou não ser preenchidos.