セレクトボックスの展開した状態（optionタグ）は、2018年12月現在では各ブラウザCSSのカスタマイズ可能なプロパティが存在しません。
展開状態までデザインカスタマイズするには、JavaScriptでモックのDOM要素を生成する必要があります。
ということで作ってみました。
See the Pen custom design selectbox by webdev (@webdev-jp-net) on CodePen.0
サンプルの特徴
タッチデバイスだけ無効化
タッチデバイスではブラウザのデフォルトのままドラムで表示させてくれたほうが断然便利。
サンプルでは、touchstart が有効な環境かどうか判定してマウス操作のときだけオリジナルデザインのoptionを表示するよう分岐させるパターンも用意してみました。
上限数は固定
JavaScriptでoptionのフォーカスが変わるたびにループを
JavaScriptでoptionのカーソルが切り替わるたびにループを走らせる負荷をケチるためにoption内でのカレント表示は、JavaScriptでカレントを親の枠につけ、配下の小要素をCSSのnth-childで割り出して表示制御するセットを20個用意する形式にしてあります。
// current & cursor
@for $i from 0 through 20 {
select[data-selected="#{$i}"] {
~ ul li:nth-child(#{$i + 1}) {
background: whitesmoke;
font-weight: bold;
}
}
ul[data-cursor="#{$i}"]::before {
transform: translate3d(0, #{$i * 100%}, 0);
}
}
キーボード操作にも簡易的に対応
通常のselectと同様、フォーカスした状態でカーソルの上下入力でoptionのカレントを切り替えられるようにしました。
が、簡易的になので、ページごとスクロールします。
泣ける！
将来的になんとかなりそうなら、なんとかしてみます。