仅限CSS的自动调整选择解决方案

Question

默认情况下，选择将采用允许最宽选项的宽度。在有很多短选项和一个长选项的情况下，当选择一个短选项时，这会留下大量的空白。

是否有任何仅使用CSS的方法让select采用所选选项的宽度？

Answer 1

在某些时候，您需要JavaScript才能获得所需内容。但我想这可能会在某种程度上帮助你。 查看JSBin上的示例。

基本上它使用焦点选择器来获得所需的动态宽度。我给了select元素一个固定的宽度，然后当select元素被聚焦时，它会根据最长的选项进行更改。

<强> CSS ：

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