JavaScript を使用せずに画像をオプションとして使用するドロップダウン選択を作成する方法

オプションとして画像を使用したドロップダウン選択を作成する方法

オプションとしてテキストの代わりに画像を備えたドロップダウン選択を実装したいと考えています。 jQuery コンボボックスの使用は一般的な提案かもしれませんが、主なオプションとしてテキストを保持し、付随するアイコンとしてのみ画像を使用します。ただし、要件は、テキストを画像で完全に置き換えることです。

幸いなことに、JavaScript を使用しなくても、この解決策を実現で​​きます。方法は次のとおりです:

HTML 構造:

<div>
<p>この構造では、ドロップダウン内の「オプション」としてラジオ ボタンを使用します。リンクされたラベルをクリックすると、ラジオ ボタンがアクティブになり、ドロップダウン リストの機能が作成されます。</p>
<p><strong>CSS スタイル:</strong></p>
<pre class="brush:php;toolbar:false">/* Style the overall dropdown box */
#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;  /* Hide when collapsed */
}
/* Style the dropdown when expanded */
#image-dropdown:hover {
    height: 200px;
    overflow-y: scroll;  /* Allow scrolling */
    transition: height 0.5s;
}
/* Hide the radio button visuals */
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* Style the dropdown options */
#image-dropdown label {
    display: none;
    margin: 2px;
    height: 46px;
    opacity: 0.2;
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;  /* Show all options when expanded */
}
/* Show the option related to the selected radio button */
#image-dropdown input:checked + label {
    opacity: 1 !important;
    display: block;
}

このスタイルは、要素の可視性とスタイルを設定し、画像をオプションとして使用してドロップダウン選択のような錯覚を作成します。

特定のニーズに合わせて、http://jsfiddle.net/NDCSR/1/ で提供される例をカスタマイズできます。たとえば、「for」属性値に基づいてラベル セレクターを使用して、各オプションの背景画像を別々に設定します。