size属性仅对text、search、tel、url、email、password类input有效，date等类型完全忽略；css width优先级高于size，且更可靠可控。
size 属性在现代前端项目中已不具备实际可控性，它既不能保证像素级宽度，也不跨浏览器一致——直接用 CSS 替代是最省心、最可靠的做法。
哪些 input 类型支持 size？
只对纯文本单行输入生效：type="text"、type="search"、type="tel"、type="url"、type="email"、type="password"。
以下类型完全忽略 size，设了也白设：
-
type="date"、type="number"、type="range"：由系统 UI 渲染，不读取该属性 -
type="checkbox"、type="radio"、type="file"：非文本输入，无“字符宽度”概念 -
textarea：用cols和rows，不是size
size 和 width 同时存在时谁起作用？
现代浏览器（Chrome 120+、Firefox 115+、Safari 17+）中，CSS width 永远胜出，size 仅在 width 未声明且计算值为 auto 时才作为 fallback 被读取。
但这个 fallback 不可预测：
- DevTools 的 Computed 面板里若看到
width: auto，说明size正在起作用，但你无法知道它最终渲染成多少像素 - 中文/emoji 下，
size="10"可能只显示 5–6 个汉字，而英文能塞满 10 个 - Chrome 用等宽字符估算，Firefox 按实际字体度量，Safari 还做 subpixel 插值 → 同一
size值，在三端像素宽度可能差 ±5px
为什么还偶尔看到 size 出现在生产代码里？
它没被废弃，但只剩两个边缘价值：
- 老旧 CMS 或邮件客户端内嵌表单中，当 CSS 不可用时，
size是唯一能触发简单视觉降级的 HTML 原生属性 - 部分屏幕阅读器会播报
size值（如“text input, size thirty”），但用户几乎感知不到，也不构成可用性依据
真正影响布局和响应式的，永远是 CSS。比如给 input[type="date"] 加 size="50"，Chrome 依然锁死约 130px 宽；必须加 min-width: 0 + width: 100% 才能破开限制。
推荐的最小可行 CSS 方案
放弃 size，用下面这段样式起步，覆盖绝大多数场景：
.form-input {
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
关键点：
-
box-sizing: border-box必须加，否则 UA 默认的padding: 2px 5px会让内容区变窄 -
width: 100%要求父容器有明确宽度；若父元素是 flex 容器，记得加min-width: 0防止 flex 项锁定最小宽度 - 对
type="date"等控件，额外加min-width: 0才能让width生效
最常被忽略的是：写了 size="30" style="width: 100%" 这种组合，其实 size 完全冗余，删掉更干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
