在 Android / iOS 浏览器上呈现多个选择选项答案

【问题标题】：Rendering multiple select options on Android / iOS browser在 Android / iOS 浏览器上呈现多个选择选项
【发布时间】：2011-11-08 18:04:23
【问题描述】：

我想以桌面浏览器呈现此类项目的相同方式在彼此下方呈现多个选项

<select size="10" name="selectionList">
  <option value="5">Sparrow</option>
  <option value="18">Snowbunting</option>
  <option value="13">Purple-crowned Fairywren</option>
  <option value="19">Eagle</option>
  <option value="16">Hawk</option>
</select>

在任何标准桌面网络浏览器上，这些项目都呈现在彼此下方，左侧有一个潜在的滚动条。然而，在 Android 和 iOS 浏览器上，只有选定的项目会被渲染，其余的分配空间被浪费了。尝试选择时，将显示选项菜单对话框。

通常因为我指定 size="10" 最多应同时显示 10 个项目。我可以理解他们选择以他们的方式实现它的原因，但我希望有一个简单的 CSS 技巧来改变默认行为。

如何在不显示选项菜单对话框的情况下让移动设备浏览器以与桌面浏览器相同的方式呈现我的选择选项。

【问题讨论】：

标签： android html css ios

【解决方案1】：

现在在 Android 2.3.3 SDK 中尝试 - 如果您向 css 添加边框，例如： style="border:solid 1px #999999"，显示全尺寸选择框。但是由于某种原因，选定的选项是不可见的。浏览器漏洞太大。

【讨论】：

【解决方案2】：

我不认为多项选择是适合这项工作的工具。我宁愿使用多个复选框。如果列表非常广泛，您还可以在顶部添加一个搜索输入，以便即时过滤列表。

【讨论】：