Question

我在网络应用中使用多行选择元素来显示选项。某些选项可能足够长，因此如果它们比选择宽度长，则会隐藏它们问题是，有些选项足够长并且隐藏在垂直滑块箭头下。在这些情况下，如果按箭头（向下或向上），则不会按箭头，但会选择该选项以下是我的意思： https://jsfiddle.net/nitoloz/j29d3emm/1/` （尝试使用垂直滑块中的箭头按钮向下滚动）

我希望这可以通过一些css技巧（z-index或smth类似）修复，但我找不到解决方案

Answer 1

我必须使用position属性，请查看以下代码

select{
      position: relative;
}
select option{
      position: static;
}

检查Updated Fiddle

Answer 2

您可以将white-space: normal;添加到选项元素中。这样，如果选项太长，它只会进入另一行，而不是在滚动条下。

更新示例：https://jsfiddle.net/j29d3emm/6/

Answer 3

您只需将课程width: 100%上的width: auto替换为.form-control

DEMO：

https://jsfiddle.net/j29d3emm/2/

多行选择选项溢出垂直滑块箭头

3 个答案: