Question

如何限制select元素下拉列表的高度 - 这样如果选项的总量大于此高度 - 我应该在下拉列表中滚动。如果我能用像素或项目数量来做这件事，我会感到满意。

所以说我有以下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个选项，其余部分在滚动中显示。

This是我到目前为止所做的，而且它不起作用。

Answer 1

在StackOverflow上搜索，我遇到了this。可悲的是，如果你想让它成为一个下拉框，你无法在CSS中实现你想要的。如链接中所述，JavaScript或jQuery可以解决问题，或者您可以使用size标记上的select属性，但这会打破下拉框外观。

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>

选择元素下拉列表的最大高度（选项元素）

2 个答案: