CSSとJavaScriptによるセレクトボックス10選！デザインを自由にカスタマイズできる無料のコードスニペット

数十年の間、デフォルトのHTMLセレクトボックスが使われてきました。しかしこのご時世、デフォルトではちょっと古い…といわざるを得ないでしょう。
 
デザイナーならもっといいものが作れますし、CSSの進化のおかげで簡単にセレクトボックスをカスタマイズできるようになりました。もちろんネット上には無料のオープンソースもあります。
 
この記事では、セレクトボックスのテンプレートトップ10を厳選しました。プラグインの形でリリースはされていませんが、CSSやJavaScriptのカスタマイズ可能なテンプレートがあります。組み込むのも簡単で、自分の目的に合った形にスタイルを変えることも可能です。
 
1. Custom Select Menu
 
See the Pen
Custom Select Menu by Wallace Erick (@wallaceerick)
on CodePen.
 
コレクションのトップバッターはWallace Erickさんのカスタムセレクトメニューのデザインです。
 
スタイルを変更するためにCSSが、メニューのUXを設定するためにJavaScriptが使われています。HTMLの標準的なセレクトボックスと微妙に動作が違い、こちらの方が使いやすいのではないかと思われます。
 
メニュー

リンク元