カスタム選択ドロップダウン

Question

[選択/オプション]ドロップダウンリストでCSSのみを使用してどれだけ達成できますか？私が見たことのあるものは、何らかの整形されたドロップダウンメニューを使用しているので、JSを使っています。

CSS（JSなし）のみで作成されたいくつかのドロップダウンメニューの例やリンクを誰かが投稿できるのであれば、私は感謝します。ありがとうございました。

Answer 1

selectコントロールのスタイリングについては、ブラウザソフトウェアの表示方法に大きく依存しているため、コントロールのスタイル設定に関しては常に制限されます。

これは<input type="file" />に似ています。一部のブラウザでは、これをテキストボックスとして表示し、その隣に「ブラウズ」ボタンがあります。一部のブラウザでは、ブラウズボタンとして表示され、その隣にファイル名が選択されています。

スタイリングドロップダウンリストが必要な場合は、divコントロールなどのCSS配置を使用してこれらのいずれかを作成することをお勧めします。ただし、希望の効果を得るにはJavaScriptを使用する必要があります。ここで

は、スタイルドロップダウンのデモです：

http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/

あなたが見ることができるように、彼らは常に異なるブラウザで若干異なって見えます。

Answer 2

あなたは本当に限られたCSSだけで正しいデザインを選択していますが、結果はさまざまなブラウザでは必ずしも同じではありません。
すべてのブラウザで機能するデザインで素敵な選択をしたい場合、唯一の機会はjavascriptを使うことです。