Question

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

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

Answer 1

是的，这绝对是可能的。

您需要做的就是为select创建一个容器，将其不透明度设置为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/

在手机上成为选择列表的图像

1 个答案: