10個の無料のCSSとJavaScriptの選択ボックススニペット

デフォルトのHTML選択ボックスは、何十年にもわたって役立ってきました。 しかし、現代では、彼らは少し…古くなっていると言っても過言ではありません。

設計者はより良い結果を出すことができ、CSSの進歩のおかげで、選択ボックスを簡単にカスタマイズできます。 オンラインで無料で入手できるすべてのオープンソースコードは言うまでもありません。

手作りのセレクトボックススタイルのトップ10ピックのコレクションをキュレーションしました。 これらはプラグインとしてリリースされていませんが、代わりにJavaScriptとCSSのカスタマイズ用のテンプレートに依存しています。 しかし、それらはすべて同じように簡単にセットアップでき、自分の目的に合わせてスタイルを変更することもできます。

1.カスタム選択メニュー

コレクションのキックオフは、ウォレスエリックのカスタムセレクトメニュースタイルです。

これは、再スタイル設定にCSSを使用し、メニューのUXを構成するためにJavaScriptを使用します。 それらは標準のHTML選択とは少し異なった振る舞いをします、そして私はそれらが少し使いやすいと思います。

メニューのサイズと色のスタイルを選択するか、ウォレスのデフォルトを使用できます。 何よりも、彼にはカスタムのアップロードフィールドデザインが含まれています。これは、スタイルを変更しようとしたことがあれば、難しいことがわかるでしょう。

クリーンでありながら新鮮な外観の選択メニューが機能する場合は、開始するのに最適な場所です。

2.シンプルセレクト

これは、すべてのレイアウトにより自然に溶け込むことを目的とした、もう1つの非常に単純な選択ボックスです。

これは、無地の白黒の配色で、より繊細な色に依存しています。 ただし、JavaScriptを使用して、ビューの内外で選択メニューをアニメーション化します。

これは、選択フィールドと同じように動作する非表示の入力フィールドをターゲットにすることで機能します。 このソリューションでは実際の<select>要素を技術的に使用しないため、この方法でもフロントエンドからフォームにデータをプルできます。

互換性が懸念される場合は、これをスキップしてください。 しかし、デザインがゴージャスで、デスクトップトラフィックに最適であることを認めなければなりません。

3.不愉快なHTMLドロップダウン

名前が示すように、この厳選されたメニューのパックは、ただ吸わないことを目的としています。 それらはすべて、必要に応じて色を変更するためにクリックできるボタンを備えたさまざまなスタイルとサイズを持っています。

もちろん、独自のレイアウトでその機能を削除して、サイトで機能する1つのスキームに固執することができます。 しかし、全体として、これらの選択メニューは通常のメニューと同じように機能し、使用するのにゴージャスです。

互換性が心配な場合は、このテンプレートの使用を検討してください。

ほとんどの変更は表面的なものであるため、ユーザーの行動にあまり影響を与えないはずです。

4.プレースホルダー選択

このプレースホルダー選択メニューの実際のデザインはゴージャスですが、ここでの要素はデザインだけではありません。

開発者のJamesNowlandは、選択範囲からデフォルトを削除することを目的としてこのメ​​ニューを作成しました。 つまり、フィールドが空白のときに表示されるテキストフィールドのプレースホルダーのように動作しますが、値を設定すると表示されなくなります。

これは完全に準拠しており、実際のHTMLselect要素で機能します。 オプションフィールドは、ユーザーが選択肢を選択するたびにデフォルトで非表示になります。 このようにすると、ドロップダウンメニューのどこにも「オプションを選択」というテキストが表示されることはありません。 本当にクリエイティブなソリューション！

5.フラットデザイン

美学はウェブデザインでしばしば重要であり、このフラットな選択メニューは素晴らしい例です。

それでも通常の選択と同じように機能し、ドロップダウン部分はまったく変更されていません。 しかし、選択自体のスタイルを変更するだけで、ページが活気づきます。 それは醜いブラウザのデフォルトよりもはるかに上品に感じます。

このテンプレートを使用して、ドロップダウン領域に適用された独自のフラットスタイルで展開することもできます。 完全にあなたの呼び出し！

しかし、開始テンプレートとして、これはどのインターフェースにとっても最も簡単な選択肢の1つです。

6.純粋なCSS

設計プロセス全体を簡素化するため、私はJavaScriptよりも純粋なCSSの大ファンです。 これは簡単なことではありませんが、そこには非常に多くの解決策があります。

私のお気に入りの1つは、純粋なCSS選択メニューだけでなく、ラジオとチェックボックスも備えたこのスニペットです。

それらはすべて驚異的に見え、あらゆるタイプのレイアウトに溶け込むはずです。 CSSで編集を行うための完全な制御があり、これらすべての最良のものは、すべての主要なブラウザーでも機能するはずです。

7.スタイル付きのアクセス可能なドロップダウン

これは、選択したメニューでできることのより定型化された例の1つです。 Andy Fitzsimonによって作成されたこのスニペットは、ドロップダウン効果をJavaScriptに依存し、グラデーションと矢印アイコンにカスタムCSSを使用します。

このメニューはJSなしの機能もサポートしているため、JavaScriptが無効になっている場合でも機能します。 これはグレースフルデグラデーションと呼ばれ、Web開発者にとってアクセシビリティの親友です。

それでも、これらの選択メニューは、2017年以降のデザインに適合しない可能性のある古い学校のWeb2.0グラデーションを実行します。

しかし、これは、少しの創造性で好きな場所に選択メニューを表示できることを示しています。 そして、CSSをハックして少しカスタマイズすれば、これらは驚くほどうまく機能します。

8.SVGアイコンメニュー

デフォルトの選択メニューには、横に矢印アイコンがあり、それ以外はあまりありません。 少しのSVG魔法で、これを他の好きなアイコンに変換できます。

このカスタムメニューには、純粋なSVGファイルで実行される独自のプラスアイコンデザインがあります。 クリックしてメニューを展開すると、閉じたり非表示にしたりするためのXアイコンにアニメーション化されます。

私はこれまでこのようなものを見たことがなく、Webブラウザの限界をどこまで押し上げてきたかを示しています。

残念ながら、これはネイティブHTMLselect要素では実行されません。 これはdiv内のリスト項目のコレクションであるため、値が選択されるたびに非表示の入力フィールドをターゲットにする必要があります。

ありがたいことに、そのプロセスは本当に簡単なので、サイトでこのデザインが必要な場合は、それを実行するのにそれほど手間はかかりません。

9.ボックス実験を選択します

これが私の目を引いた実験計画です。 比較デモ画面は、これが通常の選択メニューとどのように異なるか、そしてそれがユーザーエクスペリエンスをどのように変えるかを示しています。

最初にタップ/クリックしてメニューを開くと、完全なアニメーション効果で下にスライドします。 ただし、ページの他の場所をクリックすると非表示になる通常の選択メニューとは異なり、メニューをもう一度クリックしない限り非表示にはなりません。

シンプルなアニメーションによるすっきりとしたデザインの良い例です。 しかし、欠けているクリックして非表示にする機能が気に入らない場合は、これが取引のブレーカーになる可能性があります。

10.ダーク＆ライトセレクト

純粋なCSSも好きで、洗練された選択が必要な場合は、このソリューションを確認して、そのうちの1つを開始テンプレートとして使用してみてください。

どちらも背景にCSSグラデーションを使用し、ドロップダウンメニューをグラデーションの低い色にブレンドします。 これはJavaScriptプラグインを使用しないため、CSSを少し使用して創造的な努力をするだけでこれを実現できます。

CSS自体はかなり複雑なので、言語の使い方を知っていると役に立ちます。 しかし、出発点として、これはあなたが見つける最良の選択の1つであり、カスタマイズの余地もたくさん残されています。