疑似要素でできること【その2】フォーム要素をCSSで装飾する方法

好きな数字は2です。とらりんです。

さてさて、今回は疑似要素でできる事シリーズの第2回。ラジオボタン、チェックボックス、セレクトボックスといったフォーム要素をCSSで仕上げる方法です。

フォーム要素をCSSで装飾する際に一番重要な事。

それはinputタグに疑似要素は効かない、という事です。

ではどうするのか。labelタグを使う方法、またinputタグをpタグやpタグで囲み、その囲んだタグにCSSを設定する方法などがあります。

見た目を整えるためだけのタグが増えてしまう事になりますが、装飾した方が分かりやすくなるのでそこは気にしないでおきましょう。

素朴な疑問ですが、ラジオボタンってなんでラジオなんですかね。

四角の中にさらに四角が入るパターンと、チェックマークパターンと2つ作ってみました。

チェックマークもCSSで設定することができます。

セレクトボックス定番の下向きアイコンはCSSで設定しています。複雑な矢印の場合は画像で設定してもよいでしょう。

いかがでしたか。

一昔前はjsとか画像でとか面倒な設定をしていたものですが、CSS3になってからだいぶ楽になりましたね。

入力しやすいフォーム作りのためにぜひお役立てください。