From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/_colon_read-write/index.html | 113 +++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 files/pt-br/web/css/_colon_read-write/index.html (limited to 'files/pt-br/web/css/_colon_read-write') diff --git a/files/pt-br/web/css/_colon_read-write/index.html b/files/pt-br/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..8757d4adfc --- /dev/null +++ b/files/pt-br/web/css/_colon_read-write/index.html @@ -0,0 +1,113 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

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

+ +
{{csssyntax}}
+ +

Examplos

+ +

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:

+ +

{{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 {{htmlattrxref("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;
+}
+ +

{{EmbedLiveSample('Estilizar_controle_não_formal_de_read-write.', '100%', 400)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}Nenhuma mudança.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Define a semântica em relação à validação de HTML e restrição.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Define a pseudo-classe, mas não a semântica associada.
+ +

Compatibilidade do navegador

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf