カスタムスタイル付きセレクト
標準の <select> は OS やブラウザごとに見た目が変わり、矢印アイコンも自由に変えられません。このスニペットは appearance:none でブラウザ既定の装飾を消し、ラッパー要素の ::after 擬似要素で独自の三角アイコンを重ねることで、 サイトのデザインに馴染むドロップダウン を実…
解説
標準の <select> は OS やブラウザごとに見た目が変わり、矢印アイコンも自由に変えられません。このスニペットは appearance:none でブラウザ既定の装飾を消し、ラッパー要素の ::after 擬似要素で独自の三角アイコンを重ねることで、サイトのデザインに馴染むドロップダウンを実現しています。中身の選択肢一覧はネイティブの仕組みをそのまま使うため、スマホでも OS 標準のピッカーが開き、操作性は損ないません。
向いている場面
- 業種・カテゴリなどを選ぶお問い合わせフォーム
- 並び替えや絞り込みのオプション選択
- デザインの統一感が求められる申込画面
カスタマイズは枠線の border 色やアイコン用の ::after の content・色を変えるだけで印象が変わります。注意点として、option 内のリストそのものの見た目はブラウザ制御のため細かく変えられません。完全自作のドロップダウンにすると JavaScript とキーボード操作の実装が必要になるので、この方式は手軽さとアクセシビリティの両立に向いています。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
選択肢のリスト自体の色も変えられますか？
リストの見た目はブラウザが制御するため、細かい装飾はほとんど効きません。このスニペットは閉じている入力欄の見た目だけをカスタムし、開いたリストはネイティブのまま使うことで、スマホでも自然に動くようにしています。
矢印アイコンを別の形にしたいです
ラッパーの ::after 擬似要素の content にある三角記号を、好みの文字や記号に置き換えてください。色は同じルールの color で指定でき、より凝った形にしたい場合は背景画像として SVG を指定する方法もあります。