Chrome中的高亮颜色需通过appearance: none解除原生锁定，再用outline: none+box-shadow替代默认聚焦边框，并用::-webkit-calendar-picker-indicator配合filter调整右侧图标颜色。
Chrome 中 <input type="date"> 的高亮颜色怎么改
默认情况下，Chrome（及基于 Chromium 的浏览器）在聚焦 <input type="date"> 时，会用蓝色高亮整个输入框（包括下拉箭头区域），这个颜色无法通过 outline 或 border 直接覆盖——它来自 Shadow DOM 内部的伪元素，必须穿透样式。
关键点：只对 Chromium 系生效；Firefox 和 Safari 不支持同套伪类，且行为不同。
实操建议：
- 用
::-webkit-calendar-picker-indicator单独控制右侧小图标区域（比如改颜色、隐藏、加滤镜） - 用
::-webkit-inner-spin-button在某些旧版本中可能影响（但 date 输入框通常不显示该按钮） - 真正影响“高亮边框”的是聚焦时的
outline，但 Chrome 会强制叠加一层浅蓝背景/描边，需用outline: none+box-shadow替代 - 必须加
appearance: none才能解除原生样式锁定，否则大部分伪元素无效
实际可生效的 CSS 组合写法
下面这段能稳定覆盖 Chrome 的聚焦高亮效果（含边框色 + 背景微调）：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
input[type="date"] {
appearance: none;
outline: none;
border: 2px solid #94a3b8;
border-radius: 6px;
padding: 8px 12px;
}
<p>input[type="date"]:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}</p><p>/<em> 隐藏原生下拉箭头并重置其聚焦态 </em>/
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(40%) sepia(1) saturate(4) hue-rotate(210deg);
cursor: pointer;
}</p><p>/<em> 可选：禁用箭头点击时的默认聚焦反馈（部分版本需要） </em>/
input[type="date"]::-webkit-calendar-picker-indicator:hover {
background: transparent;
}注意：filter 是最稳妥的改色方式（比 background 或 color 更可靠），因为箭头是 SVG 图标，直接设颜色无效；box-shadow 替代 outline 是为了绕过浏览器对 outline 的硬编码高亮逻辑。
为什么 ::-webkit-datetime-edit 等伪类常失效
很多人尝试用 ::-webkit-datetime-edit、::-webkit-datetime-edit-fields-wrapper 去改内部文本样式，但这些伪类有严格限制：
- 仅在用户手动点击输入框文字区域时才激活（点击箭头不会触发）
- 一旦用户打开日历面板，这些伪类立即失效，样式回归原生
- 不能修改背景色或边框色，只允许有限的
color、font、padding - Chrome 115+ 开始进一步限制其样式作用域，很多属性被 ignore
所以别指望靠它们统一控制“高亮”——聚焦态和日历弹出态是两套独立渲染逻辑。
跨浏览器一致性怎么办
Firefox 完全不支持上述 WebKit 伪类，Safari 对 appearance: none 支持不稳定，且三者聚焦反馈样式完全不同。如果项目要求视觉一致：
- 放弃原生
type="date"，改用第三方库（如 flatpickr、Pikaday）或自研日期选择器 - 保留原生控件，但接受各浏览器差异——这是 W3C 明确允许的，且对无障碍更友好
- 用 JS 检测
input.type === 'date'是否被支持，再决定是否降级为type="text"+ 自定义校验
原生 date 输入框的样式定制本质是“打补丁”，不是“重绘”。越想强行统一，越容易在 Safari 更新或 Chrome 版本迭代后突然失效。
