原生 宽度无法直接用 width: 100% 撑开，因浏览器为其设定了默认 min-width（如 Chrome 约 130px），需显式设置 min-width: 0 和 box-sizing: border-box 才能生效；Flex 布局中同样需 min-width: 0 配合 flex: 1；Safari 兼容性最差，建议优先考虑自定义方案。
HTML5 width 百分比撑开？
不是浏览器 bug，是规范行为： 在多数浏览器（Chrome、Edge、Safari）中会被渲染为一个「控件组合」——文本框 + 日期下拉按钮，而原生控件的内部结构不可直接 CSS 覆盖。直接写 width: 100%; 通常无效，或只撑开文本区、按钮溢出。
用 width + box-sizing 强制生效的写法
必须重置盒模型并覆盖默认最小宽度：
.date-input { width: 200px; /* 或 100% */ box-sizing: border-box; min-width: 0; /* 关键：解除浏览器内置 min-width 限制 */ padding: 4px; /* 可选，让内容不贴边 */}
-
min-width: 0是核心，Chrome 默认给 date input 设了约130px的min-width，不重置就卡死宽度 - 加
box-sizing: border-box防止 padding/border 导致实际宽度超预期 - 设
width: 100%时，父容器需有明确宽度（比如display: block或设了max-width）
Flex 布局下
在 display: flex 容器里，date input 默认会「拒绝收缩」，即使写了 flex: 1 也常卡在最小尺寸。解决方法：
立即学习“前端免费学习笔记（深入）”；
- 给 input 加
min-width: 0（同上，必须） - 显式声明
flex: 1 1 auto或flex: 1 - 避免父容器设
white-space: nowrap（会干扰内联替换元素行为） - 如仍异常，可临时套一层 并设
overflow: hidden，再把 input 放进去Safari 上日期控件宽度更难调？
Safari（尤其是 macOS/iOS）对
type="date"的样式控制最弱，min-width: 0有时也不起作用。可行方案：- 改用
inputmode="numeric"+ 自定义 placeholder 提示格式（如YYYY-MM-DD），配合 JS 校验 - 用第三方轻量库（如
flatpickr）替代原生控件，完全可控 - 接受 Safari 下宽度略大，用
max-width+margin微调视觉对齐
原生 date input 的样式自由度本质受限，强行拉伸可能破坏可访问性（如屏幕阅读器识别、点击热区）。真要精细控制宽度和外观，换方案比硬 hack 更可靠。
- 改用
