font-size 对 date input 无效是因 Shadow DOM 封装，需加 -webkit-appearance: none 才能控制输入框字体；日历面板由系统渲染，CSS 无法修改其文字大小。
date input 的 font-size 为什么设了没反应？
直接给 设置 font-size 在部分浏览器（尤其是 Chrome/Edge）上可能无效，因为原生日期控件的内部结构被 Shadow DOM 封装，外部 CSS 无法穿透到日期选择器弹出面板里的文字，但输入框本身的字体大小通常可以控制——前提是绕过浏览器对表单控件的默认样式压制。
用 CSS 强制覆盖 input 元素字体大小
多数现代浏览器允许通过基础样式修改输入框内显示的日期文本（即用户看到的“2024-05-20”这部分），但需注意选择器权重和重置默认行为：
- 必须显式设置
font-size，且建议加上line-height配合，避免文字贴边或截断 - Chrome 会为
input[type="date"]应用-webkit-appearance: listbox类似样式，需用-webkit-appearance: none释放控制权 - 某些版本会继承系统字体导致尺寸不一致，建议连带指定
font-family
input[type="date"] {
font-size: 16px;
line-height: 1.5;
-webkit-appearance: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
下拉面板里的字体改不了？这是正常现象
点击输入框后弹出的日历面板（calendar picker）完全由操作系统或浏览器原生渲染，CSS 无法影响其内部文字大小。你在 DevTools 中查不到它的 DOM 节点，因为它在 Shadow Root 里，且未暴露可样式化接口。这不是你写错了，是规范限制：
- Firefox 会部分响应
font-size（仅限于面板标题栏，非日期格子） - Chrome/Edge 完全忽略所有针对面板的 CSS
- 没有标准 API 或伪元素（如
::-webkit-calendar-picker-indicator）能改面板文字
真要统一字体大小？只能换方案
如果项目要求输入框和日历面板字体严格一致，原生 input[type="date"] 不可行。替代路径只有两个方向：
- 用 JavaScript 日期选择库（如
flatpickr、dayjs+ 自定义 UI），完全可控，但增加包体积和维护成本 - 退而求其次：只保证输入框字体可读，接受面板字体由系统决定——绝大多数用户不会在意弹出面板的字号，他们关注的是能否看清、能否点中日期
真正容易被忽略的是：很多团队花几小时调试 ::-webkit-datetime-edit 这类伪元素，结果发现它只控制年月日字段的分割符样式，跟字体大小无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
