Webサイトの入力フォームなどで頻繁に利用されるセレクトボックスですが、デザインがデフォルトのままだと少し地味に感じてしまいます。
そこで今回は、selectタグとoptionタグを使い、CSSのみでセレクトボックスのデザインを変更する方法について解説していきます。サイトデザインに合わせてセレクトボックスのデザインも変更したいけど、難しいことはしたくないという人におすすめです。
目次
CSSを使ったセレクトボックスのデザイン変更
セレクトボックスはCSSでデザインを変更することができます。
デザインを変えたいときには、「selectタグ」「optionタグ」の設定を変更します。ただし、セレクトボックスをクリック後、表示（ドロップダウン）される選択肢一覧のデザイン変更は、CSSだけではできません。ドロップダウンリストのデザイン変更をしたい場合は、JavaScriptなどを使いましょう。
それでは、セレクトボックスのデザイン変更について、代表的な方法をいくつか紹介していきましょう。
背景色を変更する
セレクトボックスのデザイン変更で、まずおすすめなのが背景色の変更です。色を変えるだけで目立たせることができるので、セレクトボックスの存在をアピールできます。
セレクトボックスの背景色を変更するには、backgroundプロパティを操作します。
|
1 2 3 |
select, option{ background:"色を指定"; } |
それでは、実際に背景色を変更したセレクトボックスを見てみましょう。
See the Pen
BazYvOp by sho-go (@sho-go)
on CodePen.
入力フォームで必須なのに選ばれていないときなどにも、よく使われているデザインですね。
枠線を変更する
あまりこだわるつもりはなく、サイトデザインに合わせて違和感のない程度にセレクトボックスのデザインを変更したい場合、枠線を変更してみましょう。
枠線の色や太さ、種類を変えるだけで、今まであった違和感をなくすことができます。
セレクトボックスの枠線を変更するには、borderプロパティを操作します。
|
1 2 3 |
select, option{ border:"枠線の色" "枠線の太さ" "枠線の種類"; } |
特にセレクトボックスの枠線の色をサイトカラーに合わせるだけでも、違和感はかなり薄くなるでしょう。
それでは、実際に枠線を変更したセレクトボックスを見てみましょう。
See the Pen
abZqPaM by sho-go (@sho-go)
on CodePen.
枠線を変えるだけでかなり印象が変わります。セレクトボックスの使われているページが、ほとんどのユーザーの目には触れないのであれば、これで十分かもしれませんね。
マウスカーソルを変更する
セレクトボックス自体のデザイン変更ではありませんが、セレクトボックス上にマウスがきた時のマウスカーソルの形状を、CSSで変えることができます。
マウスカーソルを変更することで、見ているユーザーにクリックできると伝えることができます。
マウスカーソルの形状を変更するには、cursorプロパティを操作します。
|
1 2 3 |
select, option{ cursor: pointer; /* リンクカーソル（カーソルを指にする） */ } |
マウスカーソルの形状を変更する場合、リンクカーソルにするのが一般的です。他に、ヘルプカーソル（help）やドロップ禁止カーソル（no-drop）を使ってちょっとした演出をすることもできます。
参考として、ドロップ禁止カーソル（no-drop）を使ったセレクトボックスを見てみましょう。
See the Pen
OJXQrBW by sho-go (@sho-go)
on CodePen.
なお、自分で作ったオリジナルカーソルに変更することもできます。ただし、ブラウザによっては対応していないものもあるので注意が必要です。
セレクトボックスのデザイン例（HTMLとCSSのみ）
これまで紹介したセレクトボックスのデザイン方法は、ちょっとした変更を加えたいときに使える方法です。
ただし、こだわりたいのであれば、セレクトボックスのデザインを全体的に変更しましょう。参考として、HTMLとCSSのみでできるセレクトボックスのデザイン例を紹介します。
丸い枠線のセレクトボックス
ほっこりするデザインのサイトには、角ばったセレクトボックスよりも角の丸いセレクトボックスの方が雰囲気に合うでしょう。
See the Pen
PozQXxb by sho-go (@sho-go)
on CodePen.
デザイン性の高いセレクトボックス
デザイン性の高いサイトであれば、セレクトボックスもカッコよくしたいです。動きのあるセレクトボックスを使って、他のサイトとの違いをみせましょう。
See the Pen
VwjQqqY by sho-go (@sho-go)
on CodePen.
まとめ
いかがでしたでしょうか？
CSSのみでセレクトボックスのデザインを変更できる範囲は限られています。しかし、昔ながらの地味なセレクトボックスが、サイトデザインを損ねてしまう場合もあります。そんなときには、少し色を変えるだけでも印象は変わります。
目立たないかもしれませんが、セレクトボックスのデザインに、こだわりを持ってみるのも良いでしょう。
