Htmlのinputに正しい値が入力された、されていないで表示を変えるときは調べれば割と簡単に出てきたのですが、値が空か、入力されているかはなかなか出てこなかったのでメモ書きついでに書いておきます。
以下はinput
に値が入力されたときにlabel
を変化させるCSSです。
inputに入力された値が「正しい」か「正しくない」か
input
で入力された値が正しいか正しくないかは以下のように設定できます。
input:valid label{ /*値が正しい*/
color:#33f;
}
input:invalid label{ /*値が正しくない*/
color:#f33;
}

: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-shown
でplaceholderが表示されているか否かを見ています。ただし、placeholderが存在しないと検証されないので、半角スペースを挿入して見えないplaceholderを作っています。
Placeholderを別に入力しているならそれで良いでしょう。
ただしこの方法は2018/11/12現在、edgeのみ対応していないので注意しましょう。EdgeがChromium版になったことにより全ブラウザで対応するようになりました。
また、placeholderが表示されない要素(date
やtime
など)にも対応していません。