:user-valid (:-moz-ui-valid)
Baseline 2023Newly available
Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Please take two minutes to fill out our short survey.
: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 |