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

Question

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

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

Answer 1

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

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

Answer 2

您可以将 width: 100% 替换为 width: auto class .form-control

演示：

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

Answer 3

我必须使用 position 属性请检查下面的代码

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

勾选Updated Fiddle

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

Multiline select options overflow vertical slider arrow

html

css

multiple-select