A styling mechanism that automatically applies when the input value is invalid.
:invalid は、HTMLフォームの入力要素に対して「入力内容が不正な場合」に自動的に付加されるCSS疑似クラスです。
たとえば、<input type="email"> にメールアドレスとして無効な文字列が入力されたときや、required 属性があるのに空欄のとき、その入力欄は :invalid 状態になります。
この疑似クラスを使えば、入力ミスをしたときに枠の色を赤くしたり、背景色を変えたりして、視覚的にユーザーにエラーを伝えることができます。
CSS
input:invalid {
border-color: red;
background-color: #ffecec;
}JavaScriptなしでユーザーの入力状態に応じてスタイルを変えられる、使いやすく実用的な機能です。