initial commit

1 files changed, 139 insertions, 0 deletions

diff --git a/files/pt-br/web/css/_colon_invalid/index.html b/files/pt-br/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..c14654b595
--- /dev/null
+++ b/files/pt-br/web/css/_colon_invalid/index.html
@@ -0,0 +1,139 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - CSS
+  - Formulário
+  - Pseudo-class
+  - Validações
+translation_of: 'Web/CSS/:invalid'
+---
+<div>{{CSSRef}}</div>
+
+<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:invalid</code></strong> representa qualquer elemento {{HTMLElement("input")}} ou {{HTMLElement("form")}} cujo conteúdo não esteja <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">válido</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Seleciona todos os inputs inválidos */
+input:invalid {
+  background-color: pink;
+}</pre>
+
+<p>Essa pseudo-classe é útil para usuário identificar quais campos foram preenchidos incorretamente.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Esse exemplo apresenta um simples formulário onde a cor verde realça um input válido e a cor vermelha realça um input inválido.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url_input"&gt;Adicione uma URL:&lt;/label&gt;
+  &lt;input type="url" id="url_input" /&gt;
+  &lt;br /&gt;
+  &lt;br /&gt;
+  &lt;label for="email_input"&gt;Adicione um endereço de email:&lt;/label&gt;
+  &lt;input type="email" id="email_input" required/&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample('Exemplo', 600, 120)}}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Radio_buttons">Radio buttons</h3>
+
+<p>Se algum radio button de um grupo possuir o atributo <code>required</code>, a pseudo-classe <code>:invalid</code> é aplicada a todos se nenhum deles for selecionado. (Radio buttons agrupados compartilham o mesmo valor pelo atributo <code>name</code>.)</p>
+
+<h3 id="Gecko_defaults">Gecko defaults</h3>
+
+<p>Por padrão, Gecko não aplica o estilo para a pseudo-classe <code>:invalid</code>. Entretanto, pode-se aplicar um estilo (um "brilho" vermelho usando a propriedade {{Cssxref("box-shadow")}}) à pseudo-classe {{cssxref(":-moz-ui-invalid")}}, que são um conjunto que se aplicam como o <code>:invalid</code>.</p>
+
+<p>Você pode desabilitar o "brilho" usando o CSS a seguir, ou substituir completamente para alterar a aparência dos campos inválidos: </p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}</pre>
+
+<h2 id="Especificações">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-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma alteração.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Define a semântica do HTML e validação de restrições.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.invalid")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Outras pseudo-classes relacionadas com validações: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
+ <li>Mozilla pseudo-classes relacionadas: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+</ul>