:user-invalid (:-moz-ui-invalid)

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-invalid は CSS の擬似クラスで、ユーザーの操作の後、制約検証に基づき有効と判断されなかった検証済みのフォーム要素を表します。

:user-invalid 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 :invalid, :out-of-range, :required で空欄の要素に一致します。

メモ: この擬似クラスは標準外の :-moz-ui-invalid 擬似クラスと同じように動作します。

構文

Error: could not find syntax for this item

: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;
}

仕様書

Specification
HTML
# selector-user-invalid
Selectors Level 4
# user-invalid-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-invalid

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.

関連情報