多行選擇選項溢出垂直滑塊箭頭

Question

我在我的web應用程序中使用多行選擇元素來顯示選項。一些選項可能足夠長，因此如果它們長於選擇寬度，它們將被隱藏。
問題是有些情況下，其中一個選項足夠長並且隱藏在垂直滑塊箭頭下。在這些情況下，如果您按下箭頭（向下或向上），則不會按下箭頭，但會選擇該選項。
這裏是什麼，我的意思是一個libe例如：https://jsfiddle.net/nitoloz/j29d3emm/1/` （請嘗試使用垂直滑塊箭頭按鈕向下滾動）

我希望這可以固定或者一些CSS技巧（z索引或水木清華類似），但我找不到解決方案

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/