-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
94 lines (66 loc) · 2.69 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
---
title: ":read-write"
slug: Web/CSS/:read-write
---
{{CSSRef}}
A [pseudo-classe](/pt-BR/docs/Web/CSS/Pseudo-classes) [CSS](/pt-BR/docs/Web/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
{{csssyntax}}
## 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](https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html) (disponível em inglês); isso torna assim:
{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}
### Estilizar controle não formal de read-write
Este seletor não seleciona apenas {{htmlElement("input")}}/{{htmlElement("textarea")}} elementos - ele selecionará qualquer elemento que possa ser editado pelo usuário, como um {{htmlelement("p")}} elemento com [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#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;
}
```
{{EmbedLiveSample('Estilizar_controle_não_formal_de_read-write.', '100%', 400)}}
## Especificações
{{Specifications}}
## Compatibilidade com navegadores
{{Compat}}
## Veja também
- {{cssxref(":read-only")}}
- Atributo HTML [`contenteditable`](/pt-BR/docs/Web/HTML/Global_attributes#contenteditable).