From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_invalid/index.html | 154 +++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/ja/web/css/_colon_invalid/index.html (limited to 'files/ja/web/css/_colon_invalid') diff --git a/files/ja/web/css/_colon_invalid/index.html b/files/ja/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..9eb7b9d655 --- /dev/null +++ b/files/ja/web/css/_colon_invalid/index.html @@ -0,0 +1,154 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

:invalid は CSS の擬似クラスで、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が検証に失敗したものを表します。

+ +
/* 無効な <input> を選択 */
+input:invalid {
+  background-color: pink;
+}
+ +

この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。

+ +

HTML

+ +
<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>
+ +

CSS

+ +
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;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

+ + + +

注

+ +

ラジオボタン

+ +

グループのラジオボタンの1つがs required の場合、 :invalid 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ name 属性を共有しています。）

+ +

Gecko の既定値

+ +

既定で Gecko は :invalid 擬似クラスのスタイルを適用しません。しかし、 :invalid の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.invalid")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf