【CSS】inputに値が入力されているか空かを判別する

Htmlのinputに正しい値が入力された、されていないで表示を変えるときは調べれば割と簡単に出てきたのですが、値が空か、入力されているかはなかなか出てこなかったのでメモ書きついでに書いておきます。

以下はinputに値が入力されたときにlabelを変化させるCSSです。

inputに入力された値が「正しい」か「正しくない」か

inputで入力された値が正しいか正しくないかは以下のように設定できます。

input:valid label{ /*値が正しい*/ color:#33f;
}
input:invalid label{ /*値が正しくない*/ color:#f33;
}
requiredのとき
requiredのとき

:validでやる場合、inputに検証が必要なのでrequiredが必須になってきます。

<input type="text" name="textbox" required/>
<label for="textbox">ラベル</label>

値が入力されているか、空の値か

では値が空の状態か否かはどうすればいいのでしょうか。結論から言うと以下で可能です。

input:placeholder-shown label{ color:#f33;
}
input:not(:placeholder-shown) label{ color:#33f;
}
<input type="text" name="textbox" placeholder=" "/>
<label for="textbox">ラベル</label>

このようにすれば見た目の変化なしに同様のことが可能です。

この場合、:placeholder-shownplaceholderが表示されているか否かを見ています。ただし、placeholderが存在しないと検証されないので、半角スペースを挿入して見えないplaceholderを作っています

Placeholderを別に入力しているならそれで良いでしょう。

ただしこの方法は2018/11/12現在、edgeのみ対応していないので注意しましょう。EdgeがChromium版になったことにより全ブラウザで対応するようになりました。

また、placeholderが表示されない要素(datetimeなど)にも対応していません。