javascript - 成为手机选择列表的图像

Question

有没有办法在网页上显示一个图像，当点击它时，会在手机上显示选择窗口（也称为“滚轮”）？基本上，要让图像替换下拉菜单的默认显示。我会在台式机上使用常规下拉菜单，但在移动设备上使用图像。

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

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/