有没有办法让选择输入字段的宽度与其值相同，而不是最长的选项答案

【问题标题】：Is there a way to have the width of a select input field be the same is its value rather then the longest option有没有办法让选择输入字段的宽度与其值相同，而不是最长的选项
【发布时间】：2023-01-05 00:53:36
【问题描述】：

这是一个带有四个选项的示例选择：

<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>

这是它的呈现方式：

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

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

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

【问题讨论】：

标签： javascript html css forms svelte

【解决方案1】：

每次选择新选项时创建一个函数来调整输入大小

// 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>

【讨论】：