blob: 84b8ed7add27c21c5836e36216ff9e3238b160a7 (
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
|
---
title: ':user-valid (:-moz-ui-valid)'
slug: web/css/:user-valid
tags:
- CSS
- CSS Selectors
- 擬似クラス
- リファレンス
- セレクター
browser-compat: css.selectors.user-valid
---
{{CSSRef}}
**`:user-valid`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、[制約検証](/ja/docs/Learn/Forms#constraint_validation)に基づき値の検証が正しく行われた有効なフォーム要素を表します。ただし、 {{cssxref(":valid")}} とは異なり、ユーザーが操作した後にのみ一致します。
> **Note:** この擬似クラスは標準外の `:-moz-ui-valid` 擬似クラスと同じように動作します。
この擬似クラスは、以下の基準に則って適用されます。
- そのコントロールにフォーカスがなく、値が有効な場合は、この擬似クラスが適用されます。
- そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が有効であった場合（空欄の場合も含む）、この擬似クラスが適用されます。
- そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が無効であった場合、キーを入力するごとに再検証が行われます。
- その要素が必須 (required) であった場合は、ユーザーが値を変更した場合、またはフォームを送信しようとした場合にのみ適用されます。
その結果、ユーザーがコントロールを操作し始めたときに有効であった場合、ユーザーが他のコントロールにフォーカスを移したときにのみ、有効性のスタイルが変更されることになります。しかし、ユーザーが以前にフラグを立てた値を修正しようとしている場合、その値が有効になるとコントロールは直ちに表示されます。必須項目は、ユーザーが変更した場合、または変更されていない無効な値を送信しようとした場合にのみ、無効であるとフラグが立てられます。
## 構文
{{CSSSyntax}}
## 例
### :user-valid で色と記号を設定
次の例では、緑の境界と✅が、ユーザーがフィールドを操作した後にのみ表示されます。
メールアドレスを他の有効なメールに変更して、その動作を確認してみてください。
```html
<form>
<label for="email">Email *: </label>
<input id="email" name="email" type="email" value="test@example.com" required>
<span></span>
</form>
```
```css
input:user-valid {
border: 2px solid green;
}
input:user-valid + span::before {
content: '✓';
color: green;
}
```
{{EmbedLiveSample("Setting_a_color_and_symbol_on_user-valid", 140, 100)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{CSSxRef(":valid")}}
- {{CSSxRef(":invalid")}}
- {{CSSxRef(":required")}}
- {{CSSxRef(":optional")}}
- {{CSSxRef(":user-invalid")}}
|
