Question

在大多数移动浏览器上点击<select>元素会显示一个触摸友好的选项菜单，而不是您通常在桌面/笔记本电脑浏览器上看到的指针友好下拉列表。这将使<select>成为导航菜单的理想选择，而不是常用的<ul>下拉菜单。问题是，没有多少CSS可以在桌面浏览器上产生完全自定义的<select>。

是否可以使用<select>下拉列表在移动浏览器上实现与<ul>元素相同的行为，而不会产生过多的黑客行为？

如果没有，那么如何向标准组织提出解决这个问题的方法呢？

Answer 1

您可以执行以下操作：

检测移动设备（基于大小，使用WURFL或其他工具）。如果是移动设备，请隐藏标准ul下拉列表，更改为选择。如果你不喜欢选择的外观，你可以这样做：

select {
    -webkit-appearance: none;
    background: url(some_nav_image.png) #ddd;
}

jsfiddle示例：http://jsfiddle.net/h9UyZ/

老实说，如果样式正确，这些甚至可以用于主网站和移动设备，并且在所有情况下都能很好地工作。

HTML 5：使用下拉列表</select>在移动设备上<select>-like行为

1 个答案: