HTML5 <input type="date"> 样式为什么不能直接用 CSS 改？
因为浏览器对 <input type="date"> 的内部结构（比如日期下拉箭头、年月日选择面板）做了封装，标准 CSS 选择器无法穿透到 Shadow DOM 内部。你写的 input[type="date"] { color: red; } 可能生效，但改不了日历弹窗样式或清除按钮——这不是你 CSS 写得不对，是浏览器故意没开放接口。
能安全修改的样式有哪些？
仅限于表单控件最外层“输入框”本身，且各浏览器支持程度不一：
-
font-size、padding、border、background（部分浏览器支持）可以正常设置 -
::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator是 Chrome/Edge/Safari 的私有伪元素，能隐藏或重置箭头图标 - Firefox 完全不支持伪元素定制日历触发器，
::-moz-appearance也已被弃用 - IE 不支持
type="date"，别白费劲
示例：隐藏 Chrome 下的默认小箭头
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
想真正统一美化，该选原生还是自建？
取决于你的兼容性要求和维护成本：
立即学习“前端免费学习笔记（深入）”；
- 如果只需支持 Chrome/Edge 最新版 + 少量用户，加点
::-webkit-伪类 + 简单字体调整，够用 - 如果要支持 Firefox、Safari 15.4 以下、或需中文星期/农历/范围高亮，原生方案会频繁 fallback 或出 Bug
- 自建方案（如
flatpickr、dayjs + custom UI）控制力强，但引入额外 JS、要处理键盘导航、无障碍（a11y）、时区等细节 - 注意：所有第三方库的「日期格式化」和「解析」逻辑必须和后端约定一致，否则
2023-05-01在 Safari 可能被解析成 UTC 时间，导致日期偏移一天
绕过样式限制的最小成本技巧
不重写组件，也能让原生 datepicker 看起来更协调：
- 用
background-image覆盖右侧箭头区域（配合padding-right预留空间） - 把
<input type="date">设为opacity: 0，用同位置的<div> 显示格式化后的日期文本，点击时再 focus 到真实 input —— 这叫“视觉代理”，兼容性好，也不破坏表单提交逻辑 <li>务必监听 <code>change和input事件，手动同步代理显示值；别只靠valueAsDate，Safari 对空值返回null而不是undefined
真正难的不是怎么画个好看的日历，而是让不同浏览器在相同 value 下表现一致——这个坑，光靠 CSS 填不上。
