有没有办法让 select 输入字段的宽度相同是它的值而不是最长的选项

Question

这是一个带有四个选项的示例 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>

这是它的呈现方式：

“沃尔沃”和箭头之间的空格是为了让最长的选项（梅赛德斯）适合：

我想要的是整个选择字段的宽度正好适合所选选项，如下例所示：

我尝试将选择字段的宽度设置为width: fit 。 我还尝试使用 javascript 获取所选选项的宽度，然后将选择字段的宽度设置为该宽度。 这些方法都不适用于我的情况，而且我无法在网上找到与我有相同问题的人。

Answer 1

创建一个 function 以在每次选择新选项时调整输入大小

 // resize on initial load document.querySelectorAll("select").forEach(resizeSelect) // delegated listener on change document.body.addEventListener("change", (e) => { if (e.target.matches("select")) { resizeSelect(e.target) } }) function resizeSelect(sel) { let tempOption = document.createElement('option'); tempOption.textContent = sel.selectedOptions[0].textContent; let tempSelect = document.createElement('select'); tempSelect.style.visibility = "hidden"; tempSelect.style.position = "fixed" tempSelect.appendChild(tempOption); sel.after(tempSelect); sel.style.width = `${+tempSelect.clientWidth + 4}px`; tempSelect.remove(); }

 <select name="cars" id="cars" class="border-2 rounded-md m-9 border-black"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>