如何让HTML <input> 组件尺寸适配内容，解决width:fit-content不生效问题

<input> 属于浏览器内置替换元素，自带UA预设的宽度规则，width: fit-content对这类元素不生效，以下是三种可落地的实现方案：

方案1：原生size属性实现（最简单，适合低精度场景） #

直接利用input原生的size属性控制字符宽度，输入时动态修改属性值即可：

<input 
  type="text" 
  size="1" 
  placeholder="输入内容自动适配"
  oninput="this.size = this.value.length || 1"
>

• 优势：无需额外CSS、JS逻辑，代码量极小
• 不足：尺寸按字体平均字符宽度计算，特殊字符、可变字体下会有少量误差，可搭配CSSmin-width控制最小宽度避免空内容时过窄

方案2：JavaScript动态计算宽度（最常用，精度最高） #

通过创建隐藏的镜像元素计算输入内容的实际宽度，同步赋值给input：

<input type="text" id="autoWidthInput" placeholder="输入内容自动适配">

const input = document.querySelector('#autoWidthInput');
const calcWidth = () => {
  // 创建隐藏镜像元素，完全复用input的字体样式保证计算精准
  const mirror = document.createElement('span');
  mirror.style.cssText = `
    position: absolute;
    visibility: hidden;
    padding: 0;
    font: ${window.getComputedStyle(input).font};
  `;
  mirror.textContent = input.value || input.placeholder;
  document.body.appendChild(mirror);
  // 计算宽度加少量内边距余量，避免内容贴边
  input.style.width = `${mirror.offsetWidth + 8}px`;
  document.body.removeChild(mirror);
}
// 初始化、输入时都触发计算
calcWidth();
input.addEventListener('input', calcWidth);

• 优势：适配任意字体，精度极高，完全保留input原生行为
• 不足：需要额外JS逻辑

方案3：contenteditable元素模拟（纯CSS实现，适配性强） #

用可编辑div模拟输入框，这类普通元素天然支持width: fit-content：

<div 
  contenteditable="true" 
  class="mock-input" 
  data-placeholder="输入内容自动适配"
></div>

.mock-input {
  display: inline-block;
  width: fit-content;
  min-width: 60px; /* 自定义最小宽度，避免空内容时元素过窄 */
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.mock-input:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
}
.mock-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

• 优势：纯CSS即可实现自适应，无需JS监听输入
• 不足：需要额外处理表单提交逻辑（将div内容同步到隐藏input，或提交时手动取值），输入限制（如仅允许输入数字）也需要自行通过JS实现

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