使 <select> 显示为仅包含一项选择的可滚动列表？

Question

我有一个

<select>

列表，如下所示。

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

我希望它看起来像这样。

现在，这可以通过添加

multiple

和

size

属性来实现。

<select multiple size="3">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

但这也允许用户选择多个元素。只是

size="3"

不起作用（至少在 Firefox 28.0 中）；它显示为下拉列表。

规范这里似乎不包含任何可以做到这一点的属性，尽管它确实指出了

浏览器不需要将选择元素呈现为滚动列表框。

但是有什么方法可以让它看起来像我想要的，但仍然只允许单个选择？使用 JavaScript 的足够简单的解决方法对我来说也可以。

Answer 1

根据我的经验，

size="3"

可以解决问题：http://jsfiddle.net/pU39G/

<select size="3">  <!-- Note: I've removed the 'multiple' attribute -->
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

在 Chrome 33 和 Firefox 27 上进行了测试。我仍然没有 Firefox 28，但如果它在那里不起作用，那似乎是一种回归。

Answer 2

尺寸属性在 Android Chrome 中不起作用。也许有人可以确认 iOs 的行为？有什么建议可以在手机上工作吗？