CSSでカスタマイズできる部分／できない部分
セレクトボックスにはCSSで自由にカスタマイズできる部分と、ほとんどカスタマイズできない部分がある。具体的には選択前の状態であるselect要素の部分はCSSで表示をカスタマイズできるが、option要素の選択肢一覧の部分はCSSで表示をカスタマイズすることはできない。
仮に選択肢部分の表示をカスタマイズしようとすると、select要素ではなくul／liなど他の要素で見た目を作り、select要素と同等の機能や挙動をJavaScriptで別途追加実装しなけらばならない＆ユーザビリティやアクセシビリティ的に問題が生じる恐れがある。
select要素のデザインカスタマイズ方法
select要素をデザインカスタマイズする場合、右端の矢印部分もオリジナルで実装するが、select要素を疑似要素が使えないため、select要素をdiv要素などで囲み、そちらに疑似要素を使って矢印部分を実装するようにするのがポイント。また、select要素自身はデフォルトの見た目を解除して普通のブロックレベル要素と同じようにスタイリングできるよう、appearance: noneを指定してから必要なスタイルを適用する。
フォームのセレクトボックスで区切り線にhrを使用する
※Chrome 119より適用
https://coliss.com/articles/build-websites/operation/work/select-element-with-horizontal-rules.html
フォームのselect要素内のoptionのリスト間に、区切り線としてhr要素を使用できる。これはユーザーエクスペリエンスを向上させることを目的にリストを視覚的に分割することができる。
すでにSafariでもサポートされており、これでChorme、Edgeでも使用できる（Firefoxは未対応）。
<label for="pref-select">都道府県:</label>
<select name="pref" id="pref-select">
<option value="" selected>選択してください</option>
<hr>
<option value="北海道">北海道</option>
<hr>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
...
<hr>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
...
<hr>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
...
</select>