不能直接用CSS覆盖所有样式，因为input[type="date"]在各浏览器中渲染差异大：Chrome/Safari支持伪元素，Firefox不支持，Edge行为不一；需分层处理外观、隐藏箭头与清空按钮、避免依赖placeholder，并在复杂需求时降级为JS日期面板。
为什么不能直接用 CSS 覆盖所有样式
因为 input[type="date"] 是原生控件，各浏览器对它的内部结构渲染完全不同：Chrome/Safari 用 WebKit 伪元素暴露部分节点，Firefox 完全不支持这些伪元素，Edge 新版本行为又趋近 Chrome，但旧版仍残留 Trident 风格。你写的 ::-webkit-datetime-edit-year-field 在 Firefox 里根本不会生效，强行加也不会报错，只是静默忽略。
所以统一外观不是“写一套 CSS 搞定”，而是分层应对：
- 先用
appearance: none和-webkit-appearance: none去掉默认控件形态（Firefox 需配合background手动模拟） - 只对 WebKit 内核浏览器用伪元素微调（如
::-webkit-calendar-picker-indicator替换箭头） - 对 Firefox 单独用 JS 控制显示逻辑（比如空值时插入提示文字）
- 永远保留
valueAsDate获取 Date 对象，别依赖input.value的字符串格式做判断
怎么隐藏原生箭头和清空按钮
Chrome/Safari/Edge 默认右侧有下拉箭头，输入后左侧还有 × 清空按钮，Firefox 则两者都没有。想视觉一致，必须分别处理：
- 隐藏箭头：
input[type="date"]::-webkit-calendar-picker-indicator { display: none; } - 隐藏清空按钮：
input[type="date"]::-webkit-clear-button { display: none; } - Firefox 不支持上述伪元素，但可以加
padding-right: 24px预留图标位置，再用绝对定位塞一个自定义 SVG 图标进去 - 注意：iOS Safari 16.4+ 开始，
::-webkit-clear-button在某些机型上失效，得监听input事件 + 手动清空 value 并重置 class
如何让 placeholder 在所有浏览器都可见
placeholder 属性对 input[type="date"] 支持极差：Chrome 显示为灰色 “YYYY-MM-DD”，Firefox 直接不渲染，Safari 有时闪一下就消失。靠它提示用户是不可靠的。
立即学习“前端免费学习笔记（深入）”；
- 不要写
placeholder="请选择日期"，写了也大概率不显示 - 改用外部
<label>或紧邻的<span class="hint">提示格式（如“格式：2024-06-23”） - 如果非要内嵌提示，用 JS 动态控制：
input.value === "" && input.classList.add("empty")，再配 CSS.empty::before { content: "请选择日期"; color: #999; } - 注意：Firefox 不支持
::before作用于input，所以这个方案只对 WebKit 有效；真要跨浏览器，还是老实用外部标签
什么时候该放弃原生 date 输入框
当你遇到这些情况，说明原生控件已到能力边界，硬改只会增加维护成本：
- 设计稿要求日历弹出层带农历、节假日标记、或“今天/本周/本月”快捷按钮
- 需要支持范围选择（start/end 两个日期）
- 项目强制要求所有表单控件圆角统一为
6px、主色为#3a86ff，且动画入场必须是 fade + slide - 目标用户含大量 Android 旧版 WebView（如钉钉内置浏览器），
input[type="date"]点击无响应或返回乱码字符串
这时应该降级：用 input type="text" + inputmode="numeric" + pattern="\d{4}-\d{2}-\d{2}" 保基本输入，再挂一个轻量级 JS 日期面板（如 flatpickr），并确保无 JS 时仍可手动输入 ISO 格式日期。
