CSS parent state

:has(:invalid)でエラーを表現する

入力欄だけでなく、エラーを含むカード全体を強調します。フォームのどこを直せばいいか、見つけやすくなります。

core css 
.field-card:has(input:invalid) {
  border-color: var(--danger);
  background: var(--danger-soft);
}
FORM VALIDATION

Profile setup

:has(:invalid)
1

Email address

メール形式を満たすと、カード全体がOK状態に戻ります。

メールアドレスの形式を確認してください。

メールアドレスはOKです。

2

Display name

必須項目が空の間は、親カードごとエラー状態になります。

表示名を入力してください。

表示名はOKです。

3

Website

URL形式のエラーも、親カード側で受け取れます。

URLの形式を確認してください。

URLはOKです。

Point

状態を持っているのはinputですが、`:has()` を使うと外側のカードやセクションにスタイルを当てられます。