: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 |
ブラウザーの互換性
Loading…