BETA

Inputに値が入力されているかいないかをCSSで判別する方法

投稿日:2018-11-12
最終更新:2018-11-13
※この記事は外部サイト(https://amitica.net/archives/1106)からのクロス投稿です

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

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

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


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

以下HTML(Qrunchではソースコードが連続しているとmarkdownで区切っていても実際は区切られないのですね……)

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

:validでやる場合、inputに検証が必要なのでrequiredが必須になってきます。requiredの時はこちらでよさそう。

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

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

input:placeholder-shown + label{
    color:#f33;
}
input:not(:placeholder-shown) + label{
    color:#33f;
}

以下HTML

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

このようにすれば見た目の変化なしに同様のことが可能です。実用的なことを考える場合、入力必須でない項目は黒や灰色、もしくは入力済みと同じ色にしておくといいでしょう(例ではわかりやすいように赤色を表示しています)。

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

placeholderが表示されない要素(datetimeなど)には対応していないのが難点です……。

また、この方法は2018/11/12現在、一部のブラウザで対応していないので注意しましょう。

https://caniuse.com/#search=placeholder-show

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@amiticaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!