input[type="date"]的颜色无法用color直接控制，因其内部由Shadow DOM封装，需通过隐藏原生控件+自定义UI+JS同步实现主题化，兼顾兼容性与无障碍。
input[type="date"] 的颜色无法用 color 直接控制
直接给 <input type="date"> 设置 color 或 background 在多数浏览器中无效——因为原生控件的内部结构（如下拉箭头、日期按钮）由浏览器 Shadow DOM 封装，常规 CSS 选择器进不去。
真正起作用的是伪元素和特定属性，而且各浏览器支持差异大。Chrome 和 Edge 支持较全，Firefox 基本不响应大部分样式，Safari 则部分支持但行为不稳定。
- Chrome/Edge 可通过
::-webkit-calendar-picker-indicator控制右侧图标 -
::-webkit-inner-spin-button在某些旧版 Chrome 中曾影响 date 输入，但现代版本已基本失效 - Firefox 完全忽略这些伪元素，
appearance: none也无效
让日期输入框“看起来”跟随主题的实用做法
不是强行改原生控件，而是用视觉欺骗+可控 DOM 配合：隐藏真实 input，用自定义标签/按钮触发，再用 JS 同步值并渲染主题化 UI。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
visibility: hidden; position: absolute;隐藏真实<input type="date">，避免display: none导致showPicker()失效 - 外层套一个
<div class="date-field">，里面放带主题色的 <code><span></span>显示格式化后的日期，再加一个<button></button>触发选择 - 监听真实 input 的
change事件，把this.value（YYYY-MM-DD）转成 MM/DD/YYYY 或其他格式，更新 span 文本 - 按钮点击时调用
inputEl.showPicker()，不依赖 click 模拟，兼容性更好
示例片段：
<div class="date-field">
<input type="date" id="real-date" style="visibility: hidden; position: absolute;">
<span id="date-display">MM/DD/YYYY</span>
<button onclick="document.getElementById('real-date').showPicker()">?</button>
</div>
为什么不用 CSS 变量动态换肤？
CSS 自定义属性（--primary-color）确实能统一管理主题色，但对 <input type="date"> 本身几乎无感——它的边框、文字、图标颜色不响应这些变量。
真正能响应的只有你亲手写的部分：
-
.date-field button的背景和文字色 -
#date-display的字体颜色和下划线（如果做可编辑态） - 聚焦时的 outline 或 box-shadow（需配合
:focus-within）
所以“跟随主题”本质是：用 JS + 自定义 UI 替代原生渲染逻辑，把颜色控制权拿回来。
容易被忽略的兼容性和体验细节
移动端 Safari 对 showPicker() 支持较晚（iOS 16.4+），旧版本会静默失败；Firefox 目前仍不支持该方法。
必须加降级处理：
- 检测
inputEl.showPicker是否存在，不存在则 focus 真实 input（让它自然弹出） - 真实 input 保持 visible 且 tab 可达，保障键盘用户可用性
- 不要移除
id和name，否则表单提交或 React/Vue 绑定会断掉 - 日期格式化别硬写正则，用
new Date(value).toLocaleDateString('en-US')更稳，自动适配 locale
最麻烦的从来不是怎么变色，而是确保它在所有设备上都能点开、选中、提交、无障碍访问——这些比颜色本身重要得多。
