initial commit

1 files changed, 113 insertions, 0 deletions

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'
+---
+<div>{{CSSRef}}</div>
+
+<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:read-write</code></strong> representa um elemento (como o <code>input</code> ou <code>textarea</code>) que é editável pelo usuário.</p>
+
+<pre class="brush: css no-line-numbers notranslate">input:read-write, textarea:read-write {
+  background-color: #bbf;
+}
+
+p:read-write {
+  background-color: #bbf;
+}
+</pre>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Examplos</h2>
+
+<h3 id="Confirmando_informações_do_formulário_em_controles_read-onlyread-write.">Confirmando informações do formulário em controles read-only/read-write.</h3>
+
+<p>Ao utilizar os controles de formulário <code>readonly</code> 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.</p>
+
+<p>A pseudo-classe <code>:read-only</code> <em>(:somente-leitura)</em> é 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 <em>somente-leitura</em>. A pseudo-classe <code>:read-write</code> <em>(:leitura-escrita) </em>por outro lado, é usado para fornecer um estilo mais agradável para a <code>&lt;textarea&gt;</code>.</p>
+
+<pre class="brush: css notranslate">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;
+}</pre>
+
+<p>Você pode encontrar o código fonte completo em <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> (disponível em inglês); isso torna assim:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
+
+<h3 id="Estilizar_controle_não_formal_de_read-write.">Estilizar controle não formal de read-write.</h3>
+
+<p>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>
+
+<pre class="brush: html notranslate">&lt;p contenteditable&gt;Este parágrafo é editável; é read-write.&lt;/p&gt;
+
+&lt;p&gt;Este parágrafo não é editável; é read-only.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Estilizar_controle_não_formal_de_read-write.', '100%', 400)}}</p>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Nenhuma mudança.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Define a semântica em relação à validação de HTML e restrição.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>Define a pseudo-classe, mas não a semântica associada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, por favor, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div>
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{cssxref(":read-only")}}</li>
+ <li>Atributo HTML {{htmlattrxref("contenteditable")}}.</li>
+</ul>