: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.
input:read-write,
textarea:read-write {
background-color: #bbf;
}
p:read-write {
background-color: #bbf;
}
Sintaxe
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>
.
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
Specification |
---|
HTML Standard # selector-read-write |
Selectors Level 4 # rw-pseudos |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
:read-only
- Atributo HTML
contenteditable
.