size属性仅对type="text"、"search"、"tel"、"url"、"email"、"password"有效，对date、number等无效；它以字符数为单位控制可见宽度，但会被CSS width覆盖，现代开发应优先使用CSS控制宽度。
size属性只对哪些input类型生效
它只在 type="text"、type="search"、type="tel"、type="url"、type="email"、type="password" 这些纯文本单行输入中起作用；对 type="date"、type="number"、type="checkbox"、type="file" 等完全无效——设了 size="50"，Chrome/Firefox/Safari 都会直接忽略。
常见错误是给日期控件加 size，以为能拉宽面板，结果宽度纹丝不动。这不是浏览器 bug，是规范行为：这类控件由系统级 UI 渲染，压根不读取 size 属性。
size值不是像素，也不等于实际显示宽度
size 单位是“平均字符宽度”，按等宽字体（如 monospace）估算，但真实渲染受字体、字重、中文/emoji 占位差异影响很大。比如 size="10" 在中文环境下可能只勉强显示 5–6 个汉字，而英文能塞下 10 个左右。
- 它只控制**可见区域宽度**，不影响
maxlength或提交值长度 - 输入内容超宽时，框内可横向滚动查看，用户仍能输满 100 字
- 和 CSS
width同时存在时，CSS 优先级更高，size被覆盖 - placeholder 文本过长而
size太小，会被直接截断（不是省略号，是砍掉后半段）
现代项目里该用 CSS 替代 size 的具体原因
真正可控、响应式、可继承的方案是 CSS：width、max-width、flex 或 grid。例如填满父容器：
立即学习“前端免费学习笔记（深入）”；
input { width: 100%; box-sizing: border-box; }
注意两点：
- 必须加
box-sizing: border-box，否则 padding/border 会让实际宽度溢出 -
width: 100%要求父元素有明确宽度（不能是display: inline或未设宽的 flex 容器） - 在 Flex 布局中，
flex: 1必须配合min-width: 0才能正常伸缩；type="date"还得额外加min-width: 0，否则 Chrome 默认锁死约 130px - 响应式场景下，
width: clamp(200px, 80%, 600px)比固定width: 300px更稳妥
什么时候还值得用 size？怎么用才不翻车
仅限快速原型、内部工具、或需要与 legacy 系统保持一致的极简表单。使用前确认：
- type 必须是支持的文本类（别误配到
number） - 避免
size和placeholder长度严重不匹配——若 placeholder 是中文长提示，size至少要比字符数多 3–4 - 不依赖它做响应式控制，也不指望它在移动端自动适配
- 如果要动态适配 placeholder 长度，可用 JS 读取
getAttribute('placeholder')并赋值给size，但要注意中文字符视觉宽度更大，建议加余量
真正复杂的是 placeholder 截断问题：它不是样式失效，而是原生渲染机制决定的——浏览器按字符数算宽度，但没做字体度量补偿。这点最容易被忽略，也最难用纯 HTML/CSS 修复。
