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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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>
{{csssyntax}}
<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"><form>
<label for="url_input">Adicione uma URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Adicione um endereço de email:</label>
<input type="email" id="email_input" required/>
</form></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>
|
