默认情况下,选择将采用允许最宽选项的宽度。在有很多短选项和一个长选项的情况下,当选择一个短选项时会留下大量空白。
是否有任何纯 CSS 的方式让选择采用所选选项的宽度?
最佳答案
在某些时候,您将需要 JavaScript 来获得您想要的内容。但我想这可能会在某种程度上帮助你。 在 JSBin 查看示例.
基本上,它使用焦点选择器来获得您想要的动态宽度。我给 select 元素一个固定的宽度,然后当 select 元素被聚焦时,它会根据最长的选项改变。
CSS:
#mySelect {
width:70px;
}
#mySelect:focus {
width:auto;
}
关于自动调整选择的纯 CSS 解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33130593/