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

Question

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

是否有任何纯 CSS 的方式让选择采用所选选项的宽度？

Answer 1

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

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

CSS:

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