【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のみ対応していないので注意しましょう。また、placeholderが表示されない要素(datetimeなど)にも対応していません。

Can I use... Support tables for HTML5, CSS3, etc
Web系
スポンサーリンク
Amitica