【コピペで簡単！】CSSのみで作るシンプルなセレクトボックス（矢印の消し方や枠のサイズ変更方法も解説）

今回は、作る機会が多いものの、コーディングに時間がかかってしまいがちなセレクトボックスについてご紹介します！

セレクトボックスとは

セレクトボックスとは、フォームなどでよく見かけるこちらのようなものです。

ほかにも、フォームでよく使われる選択のためのツールとしては、ラジオボタン/チェックボックスがあります。
それぞれの違いは以下の表のとおりです。

	特徴	見た目	プロパティ
セレクトボックス	・複数の選択肢から1つを選択（※） ・プルダウン式なので見た目は1行		select option label
ラジオボタン	・複数の選択肢から1つ選択 ・選択肢が並んでいる ・1つをチェックすると他のチェック項目が無効になる		input label
チェックボックス	・複数の選択肢から複数選択 ・選択肢が並んでいる		input label

※ HTML5からmultipleを使用することで複数選択できるセレクトボックスを作成することもできるようになりましたが、セレクトボックスは1つのみ選択できる場面で使用されることが非常に多いです。

違いを認識して、場面にあったプロパティを使用するようにしたいですね。
今回の記事では、このうちセレクトボックスについて詳しくみていきたいと思います！

シンプルなセレクトボックス（サンプル/コピペで使用可）

まずはシンプルなセレクトボックスの例です。

See the Pen by spiqa design (@spiqa_design) on CodePen.

見た目を少し整えるためにCSSも記述していますが、セレクトボックスの機能はHTMLだけで作ることができます。

HTMLの解説

<select name="hardness">
　　<option value="針金">針金</option>
　　<option value="ばり硬">ばり硬</option>
　　<option value="硬麺">硬麺</option>
　　<option value="普通" selected>普通</option>
　　<option value="やわ">やわ</option>
　　<option value="ばりやわ">ばりやわ</option>
</select>

シンプルなセレクトボックスはselectとoptionで作成することができます。

optionの数 ＝ 選択肢の数になるので、選択肢を増やしたい場合はoptionを増やしてください。

optionのプロパティに設定しているvalue属性は、「何を選んだのか」という情報になります。
<option value="red">赤色</option>のように、選択肢と同じ情報を設定することが一般的です。

そして、optionで作成した複数の選択肢をselectで囲みます。

selectのプロパティに設定しているname属性は、「この選択肢群のグループの名前」です。
上記の例では、麺の硬さに関する選択肢が並んでいるのでname属性は「硬さ(hardness)」にしています。

セレクトボックスの初期値設定方法

セレクトボックスは、デフォルトでは1つ目の選択肢が初期値になっています。

初期値を変更したい場合は、selected属性を追加します。
上記の例では「普通」の選択肢にselected属性を記述しているので、初期値が「普通」になっていますね。

おしゃれなセレクトボックス（カスタマイズ方法）

ここまでセレクトボックスの機能面についてみてきましたが、ここからは見た目（デザイン）についてご説明したいと思います。

セレクトボックスの大きさ（幅）を変える方法

selectはインラインブロック要素なので、デフォルトでは文字の長さに応じた幅になります。
この幅は、widthで簡単に調整することができます！

See the Pen by spiqa design (@spiqa_design) on CodePen.

おすすめの設定方法は、selectをdivで囲い、selectにwidth:100%を指定する方法です。
selectの幅は親要素であるdivと同じ幅になるので、レスポンジブ調整も行いやすいですね！

セレクトボックスの矢印のデザインを変える方法

おしゃれなセレクトボックスを作りたい時に気になるのが矢印のデザインです。
セレクトボックス矢印は端末やブラウザによって異なりますが、CSSで簡単にカスタマイズ可能です！

カスタマイズ方法の詳細は、こちらの記事をご覧ください！

CSS

2021.10.01

【コピペで簡単！】CSSのみで作るシンプルなセレクトボックス（矢印の消し方や枠のサイズ変更方法も解説）

今回は、作る機会が多いものの、コーディングに時間がかかってしまいがちなセレクトボックスについてご紹介します！ セレクトボックスとは セレクトボックスとは、フォー…

まとめ

セレクトボックスは意外と使用頻度が高いです。
フォームに設置されることも多く、コンバージョン率を左右する要素の1つでもあると思います！

わかりやすく、使いやすい、そしておしゃれなセレクトボックスを作れるようになりたいですね！

こちらもおすすめ

CSS

2021.10.01

【コピペで簡単！】CSSのみで作るシンプルなセレクトボックス（矢印の消し方や枠のサイズ変更方法も解説）

今回は、作る機会が多いものの、コーディングに時間がかかってしまいがちなセレクトボックスについてご紹介します！ セレクトボックスとは セレクトボックスとは、フォー…