直接设 width: 100% 无效，因 在 chrome/edge/safari 中默认 min-width: 130px 且为「文本框+下拉按钮」组合结构，width 被最小宽度锁死；必须同时设 min-width: 0、box-sizing: border-box，并确保父容器有明确宽度。
直接设 width: 100% 为什么没用？
因为 <input type="date"> 在 Chrome、Edge、Safari 中默认带 min-width: 130px（Chrome 典型值），且其内部是「文本框 + 下拉按钮」组合结构，width 单独作用会被这个最小宽度锁死。你写 width: 100%，它只在 130px 以上才生效；低于该值就卡住不动。
必须显式重置盒模型和最小宽度：
-
min-width: 0—— 关键一步，解除浏览器内置限制 -
box-sizing: border-box—— 防止padding或border导致实际宽度溢出 - 父容器需有明确宽度（如
display: block、max-width或 Flex 容器中已设flex: 1）
<input type="date"> 在 Flex 布局里不收缩？
即使写了 flex: 1，它也常僵在 130px 不动。这不是 bug，是浏览器对替换元素（replaced element）的默认行为。
解决方法要三件套一起上：
- 给
input加min-width: 0 - 显式声明
flex: 1 1 auto或简写flex: 1 - 确保父容器没设
white-space: nowrap（会干扰内联替换元素）
若仍异常，可临时套一层 <div style="overflow: hidden"> 再把 <code>input 放进去，强制截断溢出。
size 属性对日期输入框有效吗？
完全无效。size 只对 type="text"、"email"、"password" 等纯文本输入生效；type="date"、"number"、"file" 等系统级控件压根不读取该属性——设了 size="50"，所有主流浏览器都会忽略。
这是 HTML 规范行为，不是兼容性问题。别浪费时间试 size，直接上 CSS。
Safari 上怎么调宽度最现实？
Safari（尤其 macOS/iOS）对 type="date" 的样式控制最弱：min-width: 0 有时也不起作用，按钮区域热区还可能错位。
可行路径只有三条：
- 接受 Safari 下略宽（比如用
max-width: 220px+margin-right: auto微调对齐） - 改用
inputmode="numeric"+ 自定义placeholder="YYYY-MM-DD"，配合 JS 校验格式 - 换轻量库如
flatpickr，完全可控，且不影响可访问性（ARIA 支持好）
硬 hack 宽度容易破坏点击热区或屏幕阅读器识别，真要精细控制外观，换方案比调样式更省心。
