如何在不使用 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”属性值的标签选择器来不同地设置每个选项的背景图像。