如何利用input元素的maxlength属性设置CSS width？

你用attr(maxlength em)设置width不生效，是因为CSS的attr()函数目前对非content属性的支持非常有限。虽然相关文档提到了这类用法，但它还处于实验性阶段，绝大多数主流浏览器都没有实现带单位的attr()用于尺寸属性（比如width、height），仅能在content属性里用它获取字符串值。

1. CSS变量 + 内联样式（纯CSS推荐方案） #

给每个input元素添加CSS自定义属性（变量），同步maxlength的数值，再在CSS中通过变量计算宽度：

<!-- HTML 部分 -->
<input type="text" maxlength="2" style="--max-length: 2;">
<input type="text" maxlength="5" style="--max-length: 5;">
<input type="text" maxlength="10" style="--max-length: 10;">

/* CSS 部分 */
input[maxlength] {
  width: calc(var(--max-length) * 1em);
  /* 可根据字体实际宽度调整系数，比如用 0.8em 更贴合字符宽度 */
  /* width: calc(var(--max-length) * 0.8em); */
}

如果使用模板引擎或前端框架，还可以自动绑定maxlength值到变量，无需手动编写内联样式。

2. JavaScript 批量处理（无需手动维护内联属性） #

用JS遍历所有带maxlength属性的input，自动计算并设置宽度，彻底解决扩展性问题：

document.querySelectorAll('input[maxlength]').forEach(input => {
  const maxLen = input.getAttribute('maxlength');
  // 直接设置宽度
  input.style.width = `${maxLen}em`;
  // 也可以设置CSS变量，配合上述CSS规则使用
  // input.style.setProperty('--max-length', maxLen);
});

如果页面会动态添加input，记得在元素创建后重新执行这段代码，或者用MutationObserver监听DOM变化自动触发。

3. 框架环境下的简化写法 #

如果你使用Vue、React这类框架，可以直接在渲染时绑定宽度：

Vue 示例 #

<template>
  <input 
    v-for="len in [2, 5, 10]" 
    :key="len"
    :maxlength="len" 
    :style="{ width: `${len}em` }"
  >
</template>

React 示例 #

function InputList() {
  const lengths = [2, 5, 10];
  return (
    <>
      {lengths.map(len => (
        <input 
          key={len}
          maxlength={len} 
          style={{ width: `${len}em` }}
        />
      ))}
    </>
  );
}

你之前逐个匹配maxlength值的写法，虽然能生效，但一旦maxlength取值变多，CSS代码会极度冗余，维护成本极高，上述方案都能有效规避这个问题。

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