图像变成手机上

Question

选择列表是没有什么办法来对网页，轻敲后，会显示在手机上选择窗口（也被称为“轮”）的图像？基本上，要让图像替换掉下拉列表的默认显示。我会定期使用桌面下拉菜单，但使用移动设备上的图像。

我正在考虑在页面上同时显示图片和下拉列表，并根据浏览器大小隐藏/显示正确的项目，然后如果在小尺寸上单击图片以触发隐藏的正确事件下拉菜单，但实际上并不显示这些选项 - 它只是运行我在select标签上与该事件关联的任何代码。

Answer 1

是的，这是绝对有可能的。

所有你需要做的是创造了选择容器，其不透明度设置为0，然后给容器的背景图像。

例如代码：

HTML

<div class="image"> 
    <select> 
     <option>test</option> 
     <option>test</option> 
     <option>test</option> 
     <option>test</option> 
    </select> 
</div> 

CSS

.image { background-image: url(http://eofdreams.com/data_images/dreams/cat/cat-06.jpg); background-size: cover; width: 100px; height: 100px;overflow: hidden; } 
select { opacity: 0; height: 250px; font-size: 50px; display: inline-block; margin: 10px; border: 0px; background: transparent; } 

---

实施例：http://jsfiddle.net/zmqBg/6/