blob: 6a7a05786d90580f2696e6eda25b541b4a4d501f (
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: ':invalid'
slug: 'Web/CSS/:invalid'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Selector
- Web
- セレクター
- 擬似クラス
translation_of: 'Web/CSS/:invalid'
---
<div>{{CSSRef}}</div>
<p><strong><code>:invalid</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a>に失敗したものを表します。</p>
<pre class="brush: css no-line-numbers notranslate">/* 無効な <input> を選択 */
input:invalid {
background-color: pink;
}</pre>
<p>この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<p>この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><form>
<div class="field">
<label for="url_input">URL を入力して下さい:</label>
<input type="url" id="url_input">
</div>
<div class="field">
<label for="email_input">メールアドレスを入力して下さい:</label>
<input type="email" id="email_input" required>
</div>
</form></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
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" name="Result">結果</h3>
<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
<p>赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。</p>
<ul>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Understanding Success Criterion 1.4.1 | W3C WCAG 2.0 の理解</a></li>
</ul>
<h2 id="Notes" name="Notes">注</h2>
<h3 id="Radio_buttons" name="Radio_buttons">ラジオボタン</h3>
<p>グループのラジオボタンの1つがs <code>required</code> の場合、 <code>:invalid</code> 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ <code>name</code> 属性を共有しています。）</p>
<h3 id="Gecko_defaults" name="Gecko_defaults">Gecko の既定値</h3>
<p>既定で Gecko は <code>:invalid</code> 擬似クラスのスタイルを適用しません。しかし、 <code>:invalid</code> の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-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>変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>HTML の意味論と制約検証を定義。</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>初回定義。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.selectors.invalid")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>検証に関する他の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
<li>関連する Mozilla の擬似クラス: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li>
<li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
<li>JavaScript からの <a href="/ja/docs/Web/API/ValidityState">validity state</a> へのアクセス</li>
</ul>
|
