“选择元素”下拉列表(选项元素)的最大高度

Question

如何限制选择元素下拉列表的高度 - 以便如果选项总数大于此高度 - 我应该在下拉列表中滚动。如果我能在像素或项目数量方面做到这一点，我会很满意。

所以假设我有以下 html 标记：

<select>
    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

我将如何显示仅显示前 4 个选项，其余选项在滚动中。

这就是我到目前为止所拥有的，它不起作用。

Answer 1

在StackOverflow上搜索时，我遇到了这个。可悲的是，如果你想把它保留为一个下拉框，你就无法在CSS中实现你想要的。JavaScript 或 jQuery 可以做到这一点，如链接中所述，或者您可以在 select 标签上使用 size 属性，但这会破坏下拉框的外观。

Answer 2

我在 CSS+HTML 中找到了答案，你可以这样做：

<select>
  <optgroup style="max-height: 65px;" label="">
    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
  </optgroup>
</select>