如何使select输入框宽度适配选中值而非最长选项？

先看这个基础的select示例：

<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

默认情况下，这个select框的宽度会被最长的选项（比如这里的Mercedes）撑满，选中像Volvo、Audi这类短选项时，文本和下拉箭头之间会留一大块空白。我们要实现的是：select框的宽度刚好适配当前选中的选项，不会有多余空白。

之前试过width: fit没用，用JS直接拿选中选项的宽度来设置也没成功，下面给你靠谱的解决办法：

实用解决方案：JS+隐藏元素动态计算宽度 #

核心思路是用一个隐藏的span来模拟选中文本的宽度，因为直接获取option元素的宽度在很多浏览器里都不准。具体实现如下：

<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<!-- 用来计算文本宽度的隐藏容器，要继承select的样式 -->
<span id="width-calculator" style="visibility: hidden; position: absolute; white-space: nowrap; font-family: inherit; font-size: inherit; padding: inherit;"></span>

<script>
const select = document.getElementById('cars');
const widthCalc = document.getElementById('width-calculator');

// 计算并设置select宽度的函数
function adjustSelectWidth() {
    const selectedText = select.options[select.selectedIndex].text;
    widthCalc.textContent = selectedText;
    // 加上下拉箭头的宽度（不同浏览器箭头宽度有差异，这里取20px做参考，可自行调整）
    select.style.width = `${widthCalc.offsetWidth + 20}px`;
}

// 页面加载时先设置一次
adjustSelectWidth();

// 切换选项时重新计算宽度
select.addEventListener('change', adjustSelectWidth);
</script>

注意点： #

• 隐藏的span要继承select的字体、内边距等样式，这样计算出来的宽度才和select里的文本宽度一致
• 额外加的20px是给下拉箭头留空间，你可以根据自己浏览器里箭头的实际宽度调整这个数值
• 这种方法比直接获取option的offsetWidth靠谱得多，因为很多浏览器里option元素的宽度无法正确获取

纯CSS尝试（有局限性） #

如果不需要兼容旧浏览器，可以试试width: fit-content，但原生select对这个属性的支持很有限，大部分浏览器还是会按最长选项来算宽度。就算结合max-width，也没法实现选中不同选项时动态变宽的效果，所以还是上面的JS方法更实用。

内容的提问来源于stack exchange，提问作者Sebastian Trygg