使用图像而不是未打开的<select>？</select>

Question

我想知道是否可以使用CSS和JS来使用下拉列表的自定义图像来代替实际的＆lt; select＆gt; element - 当它处于初始未打开状态时？

点击它时，它只显示常规＆lt; select＆gt;下拉选择，也许在上面提到的图像下面......

我在这个论坛和网络上搜索一般，找不到任何密切相关的内容。我甚至没有为这个想法找到任何jQuery解决方案。

会感激一些帮助。谢谢！

Answer 1

您当然可以显示图片并在其位置上替换<select>。你不能做的是以编程方式打开选择框，或“回收”发生在图像上的点击。因此，您必须单击一次才能更换图像，然后再次实际打开选择 - 使用不多。

最好使用众多脚本和插件中的一个，它们会将页面上的<select>元素替换为一堆更具样式的div。

Answer 2

HTML

<img src='somImage.jpg' id='replace'/>
<select>
...
</select>

JS

$('#replace').click(function(){
    $(this).hide();
    $(this).next().show();
})

小提琴：http://jsfiddle.net/maniator/KyFgy/

Answer 3

看看this。我想你会喜欢它