純CSS的解決方案到自動選擇選項

Question

默認情況下，選擇將採用允許最寬選項的寬度。在有很多短期選擇和長期選擇的情況下，當選擇短期選項時，這會留下大量空白。

是否有CSS的唯一方式選擇採用選定的選項的寬度？

Answer 1

在某些時候，您需要使用JavaScript才能獲得您想要的內容。但我想這可能會在一定程度上幫助你。 查看JSBin的示例。

基本上它使用焦點選擇器爲你想要的動態寬度。我給了select元素一個固定的寬度，然後在select元素聚焦時根據最長的選項改變。

CSS：

#mySelect { 
    width:70px; 
} 
#mySelect:focus { 
    width:auto; 
}