aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/_colon_invalid/index.html
blob: 6c9228bc1e0b2bbdaaeaa4bb39467625caa71198 (plain)
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
---
title: ':invalid'
slug: 'Web/CSS/:invalid'
translation_of: 'Web/CSS/:invalid'
---
<p> </p>

<p>{{CSSRef}}</p>

<p><strong><code>:invalid</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">伪类</a> 表示任意内容未通过验证的 {{HTMLElement("input")}} 或其他 {{HTMLElement("form")}} 元素 .</p>

<pre><code>/* 可选定任意无效的&lt;input&gt; */
input:invalid {
  background-color: pink;
}</code></pre>

<p>这个伪类对于突出显示用户的字段错误非常有用。</p>

<h2 id="Syntax">Syntax</h2>

<pre>:invalid
</pre>

<h2 id="Example">Example</h2>

<p>以下示例是一个简单的表单,当值有效时,元素颜色为绿色,无效时为红色。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;form&gt;
  &lt;label for="url_input"&gt;Enter a URL:&lt;/label&gt;
  &lt;input type="url" id="url_input" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;label for="email_input"&gt;Enter an email address:&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="Result">Result</h3>

<p>{{EmbedLiveSample('Example', 600, 120)}}</p>

<h2 id="注意">注意</h2>

<h3 id="单选钮(Radio_buttons)">单选钮(Radio buttons)</h3>

<p>若一组单选钮被设定为必须选定一个,在该组中没有按钮被选中的情况,:invalid伪类被应用到该组中的所有按钮。(单选钮组按照name属性共享相同值。)</p>

<h3 id="Gecko_默认">Gecko 默认</h3>

<p>默认情况下,Gecko不应用:invalid伪类设置的样式。但是,Gecko可以使用{{cssxref(":-moz-ui-invalid")}}伪类的样式(使用{{Cssxref("box-shadow")}} 属性设置红色发光边框)来达到类似的效果,它可以被应用在:invalid伪类的子集中。</p>

<p>你可以使用以下CSS禁用红色发光边框,或完全重写它以改变无效输入域的外观:</p>

<pre><code>:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}</code></pre>

<h2 id="规范">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Defines the semantics of HTML and constraint validation.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("css.selectors.invalid")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>Other validation-related pseudo-classes: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
 <li>Related Mozilla pseudo-classes: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
</ul>