创建一个包含图像而不是文本的下拉选项可能具有挑战性。虽然 jQuery 组合框已经被提出，但它依赖于提供带有图像的文本选项。要完全用图像替换文本，需要采用不同的方法。
聪明的 CSS 解决方案
对于这个特定的用例，其中图像代表在线中的线条粗细绘画应用程序，不需要 JavaScript。相反，我们可以利用单选按钮和 CSS 来创建所需的效果。
HTML 结构
<div>
CSS 样式
#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 即可实现所需的功能。
以上是如何创建显示图像而不是文本的下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！
