可以让 Zurb Foundation 4 选择下拉菜单在移动浏览器上工作吗？答案

【问题标题】：Possible to get Zurb Foundation 4 select drop-downs to work on mobile browsers?可以让 Zurb Foundation 4 选择下拉菜单在移动浏览器上工作吗？
【发布时间】：2013-08-02 15:08:26
【问题描述】：

我无法在 any 移动浏览器上的 Foundation 4 选择下拉菜单中滚动选项。这使得 Foundation 的选择下拉菜单毫无用处。有没有办法让它工作？

【问题讨论】：

你能发布一个它不起作用的例子吗？在我的简短测试（metadept.com/test）中，它似乎通过缩放页面主体以适应菜单大小来“工作”，这不是很令人满意，但不会阻止它被使用。（在我的 Nexus 7 上的移动 Chrome 和 Firefox 中测试）
你的意思是如果你把一个select 元素放在一个具有custom 类的表单中，它就不起作用？ See this link，我给你做了一个测试。这适用于我的 android 浏览器 webkit 534.30（版本 4 移动 safari）。
@von - 你的测试不适用于我的 iPhone。我不能滚动它。这正是问题所在。我知道这在其他安卓浏览器上有问题，我猜你有一个可以工作的。
@metadept 看看 von 的例子。我认为您的示例仅适用，因为单击选项不会关闭下拉菜单
@at。不幸的是，我目前没有可用的 iPhone 进行测试；我会在星期一再看一遍。

标签： css html-select zurb-foundation css-frameworks

【解决方案1】：

同样的问题。解决此问题的唯一方法 (afaik) 不是使用自定义表单并构建您自己的下拉列表就像 amazon 那样：

<span id="nav-search-in" class="nav-sprite nav-facade-active" style="width: auto;">
   <span id="nav-search-in-content" style="width: auto; overflow: visible;">All</span>
   <span class="nav-down-arrow nav-sprite"></span>
   <select id="searchDropdownBox" class="searchSelect" style="top: 0px;">
        <option value="search-alias=aps" selected="selected">All Departments</option>
        <option value="search-alias=watches">Watches</option>
    </select>
 </span>

将选择的不透明度设置为 0（查看其网页上的其他样式）并通过单击向下箭头跨度触发下拉菜单。

【讨论】：