原生 date 输入框跨浏览器渲染机制不同：safari 强制系统控件且禁用 padding/font-size，firefox 不显示日历弹窗，chrome 可样式化但图标对齐难；需按引擎分层处理，禁用 appearance: none 全局设置，chrome 单独隐藏并重绘图标，必要时用 flatpickr 等 js 日历降级兜底。
原生 input[type="date"] 在 Chrome、Firefox、Safari 之间根本不是“样式微调差异”，而是渲染机制不同：Safari 强制用系统控件且禁用 padding 和 font-size，Firefox 根本不显示日历弹窗，Chrome 虽可样式化但右侧图标位置难对齐。统一外观不能靠“加点 CSS 就行”，得按浏览器引擎特性分层处理。
为什么直接写 input[type="date"] { padding: 8px; font-size: 1rem; } 会失效
因为各引擎对这个控件的 shadow DOM 封装策略不同：
- Safari（WebKit）：
padding会被忽略，font-size只影响输入框内文字，不改变弹出日历字体；设appearance: none会直接禁用弹窗功能 - Firefox（Gecko）：不支持任何伪元素样式，
::-moz-*规则无效，且默认只渲染为文本框，无日历 UI - Chrome（Blink）：支持
::-webkit-calendar-picker-indicator，但改图标大小/颜色后，常和line-height冲突导致垂直错位
安全有效的样式归零与重建方案
不要试图“美化原生控件”，先确保它在所有浏览器中行为可控、尺寸稳定：
- 必须显式声明
box-sizing: border-box，否则 Safari 下padding+border会让实际可输入宽度严重缩水 - 统一设
width: 120px（ISO 日期最小完整显示宽度），避免 Firefox/Safari 因内容收缩导致 “2026-…” 截断 - 给父级
td或容器加vertical-align: middle，解决表格中上下悬空问题 - 禁用
appearance: none全局设置，改为仅对 Chrome 加input[type="date"]::-webkit-calendar-picker-indicator { display: none; }，再用伪元素模拟图标
真正跨浏览器一致的替代做法
当项目要求视觉/交互完全统一，或需支持旧版 Safari（≤15）、Android WebView、IE 时，原生控件应视为“降级兜底”，主流程走 JS 日历：
- 用
flatpickr（配dateFormat: "Y-m-d"）包裹input[type="text"]，隐藏原生input[type="date"]并同步 value - 初始化前做运行时检测：
const isDateSupported = document.createElement('input').type === 'date';，返回false时才加载插件 - 表单提交前强制校验：
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/.test(input.value)，别信input.checkValidity()—— Firefox 总是返回true
最易被忽略的一点：日期控件的“一致性”不在视觉，而在 value 格式、空值表现、change 事件触发时机这三处。哪怕用了自定义日历，只要提交的 value 是 "2026-10-20"、空时是 ""、用户选完就触发 change，那它就是真正兼容的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
