如何创建显示图像而不是文本的下拉菜单？

在下拉选项中显示图像

创建一个包含图像而不是文本的下拉选项可能具有挑战性。虽然 jQuery 组合框已经被提出，但它依赖于提供带有图像的文本选项。要完全用图像替换文本，需要采用不同的方法。

聪明的 CSS 解决方案

对于这个特定的用例，其中图像代表在线中的线条粗细绘画应用程序，不需要 JavaScript。相反，我们可以利用单选按钮和 CSS 来创建所需的效果。

HTML 结构

<div>
<p><strong>CSS 样式</strong></p>
<pre class="brush:php;toolbar:false">#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;
}
#image-dropdown:hover {
    height: 200px; 
    overflow-y: scroll;
    transition: height 0.5s;
}
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#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;
}
#image-dropdown input:checked + label {
    opacity: 1 !important; 
    display: block;
}

怎么样有效

技巧在于使用“for”和“id”属性将标签与单选按钮关联起来。单击标签时，会激活相应的单选按钮。 CSS 样式确保：

• 在折叠状态下，只有选定的单选按钮的标签可见。
• 当下拉列表展开（悬停时）时，将显示所有标签。
• 选中的单选按钮后面的标签即使在折叠状态下仍然可见。

通过分配背景图像到标签，下拉选项显示为图像。这种方法有效地用图像替换了文本，无需 JavaScript 即可实现所需的功能。