: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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:user-valid

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Has more compatibility info.

関連情報