テキストの代わりに画像を使用してドロップダウン メニューを作成するにはどうすればよいですか?

画像を含むドロップダウン選択

テキストの代わりに画像を表示するドロップダウン選択を作成しようとしています。 jQuery コンボボックスがよく提案されますが、やはり画像の横にテキストが必要です。

解決策: テキストを画像に置き換えます

驚くべきことに、このドロップダウン メニューは JavaScript なしで実現できます。 ！方法は次のとおりです:

HTML 構造

ラジオ ボタンとラベルの使用:

<div>
<p><strong>CSS スタイル</strong></p>
<p>CSS を使用してスタイルを設定します。ラジオ ボタンを非表示にし、ドロップダウン オプションのようにラベルをスタイル設定し、カーソルを合わせるとドロップダウンが展開されるようにします。</p>
<pre class="brush:php;toolbar:false">#image-dropdown {
    /* Style the "box" in its minimized state */
    ...
}
#image-dropdown:hover {
    /* When expanded, the dropdown will get native means of scrolling */
    ...
}
#image-dropdown input {
    /* Hide the nasty default radio buttons */
    ...
}
#image-dropdown label {
    /* Style the labels to look like dropdown options */
    ...
}
...
#image-dropdown input:checked + label {
    /* Make the selected option visible in the collapsed menu */
    ...
}

機能

ラジオ ボタンはラベルにリンクされていますラベルをクリックすると、対応するラジオ ボタンがアクティブになるようにします。ドロップダウンの上にマウスを移動すると、ドロップダウンが展開され、すべての画像オプションが表示されます。選択した画像は、折りたたまれた状態でも表示されたままになります。

例

完全な例は、http://jsfiddle.net/NDCSR/1/

実装の詳細

相対位置および高い Z インデックスを備えたコンテナ内の絶対位置で使用します。
• さまざまな線スタイルについては、次を使用します。 「for」属性に基づく各ラベルの一意の背景画像。