blob: 25592d7d4faef208c1ad9970b387808eb11cc014 (
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
|
---
title: ':user-invalid (:-moz-ui-invalid)'
slug: Web/CSS/:user-invalid
tags:
- CSS
- CSS Selectors
- 擬似クラス
- リファレンス
- セレクター
browser-compat: css.selectors.user-invalid
translation_of: Web/CSS/:user-invalid
---
{{CSSRef}}
**`:user-invalid`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーの操作の後、[制約検証](/ja/docs/Learn/Forms#constraint_validation)に基づき有効と判断されなかった検証済みのフォーム要素を表します。
`:user-invalid` 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 {{CSSxRef(":invalid")}}, {{CSSxRef(":out-of-range")}}, {{CSSxRef(":required")}} で空欄の要素に一致します。
> **Note:** この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。
## 構文
{{CSSSyntax}}
## 例
### :user-invalid で色と記号を設定する
以下の例では、次の例では、赤枠と❌はユーザーがフィールドを操作した場合にのみ表示されます。
メールアドレス以外を入力してみて、その動作を確認してみてください。
```html
<form>
<label for="email">Email *: </label>
<input id="email" name="email" type="email" required>
<span></span>
</form>
```
```css
input:user-invalid {
border: 2px solid red;
}
input:user-invalid + span::before {
content: '✖';
color: red;
}
```
{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-invalid", 140, 100)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{CSSxRef(":valid")}}
- {{CSSxRef(":invalid")}}
- {{CSSxRef(":required")}}
- {{CSSxRef(":optional")}}
- {{CSSxRef(":user-valid")}}
|
