HTML input元素size属性设为0不生效，如何使其渲染为0宽度？

HTML 标准中规定 input 元素的 size 属性最小有效值为1，当传入值为0时，浏览器会自动忽略异常值，回退到默认的 size 配置（多数浏览器默认值为20），这就是你设置size=0不生效的核心原因。

提供两个可直接落地的方案，按需选择：

方案1：兼容原有size逻辑，空值特殊处理 #

修改JS逻辑，当输入内容长度为0时直接通过CSS控制宽度，非空时继续用原有size属性控制，同时新增初始化逻辑保证页面刚加载时就生效：

$('input').on('input', function () {
  const valLen = $(this).val().length
  if (valLen === 0) {
    // 空值时直接设宽度为0
    $(this).css('width', '0px')
  } else {
    // 非空时清除自定义宽度，用size属性控制
    $(this).css('width', '').attr('size', valLen)
  }
// 初始化触发一次，保证页面加载完成时就适配宽度
}).trigger('input')

配合添加CSS消除默认样式的额外宽度影响：

input[type="text"] {
  /* 清除默认最小宽度限制 */
  min-width: 0;
  /* 可选：如果不需要默认内边距、边框可以加上，避免额外宽度 */
  padding: 0;
  border: none;
}

方案2：替换size属性，用ch单位更精准控制 #

ch 是CSS相对单位，1ch等于当前字体下数字0的宽度，和size属性的计算逻辑基本一致，可控性更高，不用处理size的最小值限制：

$('input').on('input', function () {
  const valLen = $(this).val().length
  $(this).css('width', `${valLen}ch`)
}).trigger('input')

同样可以搭配上面的CSS消除默认样式影响。

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