:user-valid (:-moz-ui-valid)
Baseline
2023
Newly available
Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
:user-valid は CSS の擬似クラスで、制約検証に基づき値の検証が正しく行われた有効なフォーム要素を表します。ただし、 :valid とは異なり、ユーザーが操作した後にのみ一致します。
メモ:
この擬似クラスは標準外の :-moz-ui-valid 擬似クラスと同じように動作します。
この擬似クラスは、以下の基準に則って適用されます。
- そのコントロールにフォーカスがなく、値が有効な場合は、この擬似クラスが適用されます。
- そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が有効であった場合（空欄の場合も含む）、この擬似クラスが適用されます。
- そのコントロールにフォーカスがあり、フォーカスを受けた時点でその値が無効であった場合、キーを入力するごとに再検証が行われます。
- その要素が必須 (required) であった場合は、ユーザーが値を変更した場合、またはフォームを送信しようとした場合にのみ適用されます。
その結果、ユーザーがコントロールを操作し始めたときに有効であった場合、ユーザーが他のコントロールにフォーカスを移したときにのみ、有効性のスタイルが変更されることになります。しかし、ユーザーが以前にフラグを立てた値を修正しようとしている場合、その値が有効になるとコントロールは直ちに表示されます。必須項目は、ユーザーが変更した場合、または変更されていない無効な値を送信しようとした場合にのみ、無効であるとフラグが立てられます。
構文
:user-invalid
例
: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;
}
仕様書
| Specification |
|---|
| HTML # selector-user-valid |
| Selectors Level 4 # user-valid-pseudo |
ブラウザーの互換性
Loading…