CSS FORM STATE

:has()で入力状態を親カードに反映する

状態を持っているのはinput。見た目を変えたいのは外側のカード。未入力、OK、エラーをCSSだけで切り替えます。

Input State Cards 入力状態に合わせて、親カード全体の見た目が変わります

:placeholder-shown / :valid / :invalid

Required Project name 未入力です入力済みです入力してください Email Contact email 未入力ですメール形式ですメール形式を確認してください URL Website URL 未入力です URL形式です URL形式を確認してください

Core CSS

.field-card:has(input:placeholder-shown) { ... }
.field-card:has(input:valid:not(:placeholder-shown)) { ... }
.field-card:has(input:invalid:not(:placeholder-shown)) { ... }

Point

空欄も invalid になるので、未入力とエラーを分けたいときは :placeholder-shown を合わせると扱いやすいです。

:has()で入力状態を 親カードに反映する

:has()で入力状態を親カードに反映する