数十年の間、デフォルトの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の標準的なセレクトボックスと微妙に動作が違い、こちらの方が使いやすいのではないかと思われます。
メニューの色やサイズを自分で選ぶこともできますが、Wallaceさんのデフォルトをそのまま使うこともできます。何より素晴らしいのはカスタムのアップロード欄までついていることです。おそらくスタイル変更をしようとしたことのある人は、どれだけ変更が難しいかご存じのはずです。
すっきりしていて鮮やかな見た目のセレクトボックスが欲しい方には最初の選択肢として有効です。
2. Simple Select：白黒の控えめなデザイン
See the Pen
Dropdown Menu by Mostafa (@General-Dev)
on CodePen.
こちらもどんなレイアウトにもマッチしやすいシンプルなセレクトボックスです。
白黒のプレーンなカラースキームの控えめな色が使われています。セレクトメニューが出てきたり引っ込んだりするときのアニメーションにはJavaScriptも使われています。
選択欄と同じように動作する隠れた入力欄を選択することで機能します。このテンプレートでは実際に<select>要素は使われていないので、データをフロントエンドからフォームに引っ張り出すことができます。
互換性を重視するならこのテンプレートは不向きです。ですがデザインはゴージャスで、デスクトップに最適です。
3. Non-Sucky HTML Dropdowns：多様なスタイル
See the Pen
Custom dropdown by Silver Drop (@silverdrop)
on CodePen.
名前の通り、ダサく（suck）見えないメニューを作るためのテンプレートです。スタイルも多様で、色を好みに変えられるボタンもあります。
もちろんこの機能をレイアウトから削除して必要な色に固定することもできます。セレクトメニューは普通に動作し、使い勝手もゴージャスです。
互換性を気にしないならこのテンプレートを使ってみてください。
見た目を変える機能がほとんどですので、UXにはあまり影響がありません。
4. Placeholder Select：デフォルトの選択肢を非表示
See the Pen
Select Box with Placeholder [CSS Only] by James Nowland (@jnowland)
on CodePen.
確かにこのプレースホルダーセレクトメニューのデザインはゴージャスですが、すごいのはデザインだけではありません。
開発者のJames Nowlandさんは選択肢からデフォルトをなくすことを目的にこのテンプレートを作成しました。つまりはテキスト欄のプレースホルダーのように、空欄の時は見えていますが入力すると欄が見えなくなります。
実際のHTMLのselect要素にも完全対応しています。オプション欄はユーザーがどこを選択しても見えないようにデフォルトで設定されています。なのでドロップダウンメニューに「この中から選択」のテキストが出てくることはありません。非常にクリエイティブです！
5. Flat Design：どんなサイトにも合いそうなシンプルデザイン
See the Pen
Flat selectbox by Peter Geller (@PeterGeller)
on CodePen.
webデザインの世界では美しさが求められますが、このフラットデザインのセレクトメニューは見事です。
従来のセレクトメニューと同じように動き、ドロップダウン部分に至っては何も変わっていません。しかし選択部分のスタイルを変えるだけでページの印象が変わります。
自分で作ったフラットデザインをこのテンプレートのドロップダウン部分に追加することもできます。どうするかはデザイナー次第です！
最初のテンプレートとしてもどんなインターフェイスにも合うシンプルなデザインです。
6. Pure CSS：CSSだけで作られて軽量
See the Pen
Accessible checkboxes and radio buttons by Michelle (@michmy)
on CodePen.
デザイン作業がシンプルになるので、JavaScriptよりもCSSのみの方が好みです。簡単ではありませんが、ソリューションも数多く存在します。
筆者の一番のお気に入りはこのスニペットで、CSSのみで作られているというだけでなくラジオボタンやチェックボックスもあります。
見た目も素晴らしくどんなタイプのレイアウトにもマッチします。CSSもすべて編集可能で主なブラウザでは大体動作します。
7. Styled Accessible Dropdowns：JavaScriptオフでも使える
See the Pen
styled drop down with nojs support by Andy Fitzsimon (@andyfitz)
on CodePen.
セレクトメニューでできることをスタイリッシュに集約したテンプレートです。Andy Fitzsimonさんはこのテンプレートを作るのに、ドロップダウン動作にはJavaScriptを、グラデーションや矢印アイコンをカスタムするのにはCSSを使っています。
このテンプレートのすごいところはJavaScript以外の機能を使っているため、JavaScriptがオフになっていても使えるということです。これはグレースフルデグラデーションと呼ばれ、web開発者にとってアクセシビリティの面での強い味方です。
しかしこのメニューにはweb 2.0時代の昔風のグラデーションが使ってあるので、2017年以降のデザインには合いません。
ちょっとした創造力があればセレクトメニューをどこでも使うことができるというのをこのテンプレートは証明しています。CSSをちょっといじってやるだけで、驚くべき機能が発揮できます。
8. SVG Icon Menu：セレクトボックスの矢印アイコンを好きな形に変えられる
See the Pen
SVG Icon Menu by Carrie Wiley (@CarrieWiley)
on CodePen.
デフォルトのセレクトメニューには端に矢印アイコンがありますが、ほかのアイコンはありません。ちょっとしたSVGマジックで、このアイコンをどんな形にも変えることができてしまいます。
このカスタムメニューではSVGファイルのみを使って+型のアイコンが作られています。クリックしてメニューを開くと、メニューを閉じるためのxアイコンにアニメーションで変化します。
こんな機能は他で見たことがなく、いかにwebブラウザの限界というものがなくなってきているか思い知らされます。
残念ながらこのセレクトメニューはHTMLのselect要素には対応していません。div の中の項目のコレクションのため、値が選択されたときは隠れた入力欄をターゲットにしなくてはいけません。
非常に導入しやすいので、苦労せずにこのデザインをサイトに組み込むことができます。
9. Select Box Experiment：選択肢を表示させた状態を維持できる
See the Pen
Select Box Experiment by Maneesh (@maneeshc)
on CodePen.
こちらは非常に目に留まる実験的なデザインです。比較デモでは、このセレクトメニューが通常のものとどれだけ違い、ユーザーエクスペリエンスを変えるかがよくわかります。
まずメニューをタップまたはクリックして開くと、フルアニメーションでスライドします。通常のメニューだとページのどこかを押すとメニューが閉じてしまいますが、このメニューは同じ場所をもう一度クリックしない限りは閉じません。
すっきりとしたデザインとシンプルなアニメーションの非常に良い見本です。どこかをクリックして閉じる機能がないのが気に入らない場合、このテンプレートはいただけないかもしれません。
10. Dark & Light Selects：滑らかなスライドメニューに使える
See the Pen
Dark and Light Dropdown Lists by Thibaut (@Thibaut)
on CodePen.
CSSのみで、滑らかなスライドメニューが欲しい場合はこのテンプレートから始めてみるとよいでしょう。
背景にはCSSのグラデーションが使われ、ドロップダウンの色がグラデーションの下の色に溶け込むようになっています。JavaScriptのプラグインは使っていないのでCSSを少し使って創造力を働かせれば完成できます。
CSS自体が複雑なので、CSSの知識があれば役に立つでしょう。初めて使うテンプレートとしてはベストな選択肢で、カスタマイズの余地も十分にあります。
おすすめ新着記事
おすすめタグ