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

Question

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

<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>

在任何标准桌面Web浏览器上，这些项目都会在另一个下方呈现，左侧有一个潜在的滚动条。但是，在Android和iOS浏览器上，仅渲染所选项目，其余的已分配空间被浪费。尝试选择时，将显示选项菜单对话框。

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

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

Answer 1

现在在Android 2.3.3 SDK中试用它 - 如果你向css添加边框，例如： style =“border：solid 1px＃999999”，它显示全尺寸选择框。但由于某种原因，选定的选项是不可见的。浏览器太多了。

Answer 2

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