safari 中原生 date 输入框无法用 css 覆盖，因其实现于 shadow dom 且 apple 严格限制 appearance 控制；应改用 type="text" + 轻量日期库（如 flatpickr），手动同步 value 并派发 input 事件，确保表单验证与框架响应正常。
原生 input[type="date"] 在 Safari（尤其是 iOS 16.4+ 和 macOS）中无法通过 CSS 覆盖其内部 UI 结构，所谓“覆盖”其实是误判——你试图用 appearance: none 或伪元素强行修改的区域，根本不在标准 DOM 中，而是 Shadow DOM 渲染的系统控件，Safari 对这部分的暴露和控制权极小。
为什么 appearance: none 在 Safari 中会失效或导致交互丢失
Safari 对 appearance 的支持非常保守：-webkit-appearance: none 在部分版本中虽能隐藏日历图标，但会同时禁用整个原生选择器逻辑，用户点击后无响应；更早版本（如 iOS 15.x）甚至完全忽略该声明。这不是兼容性 bug，而是 Apple 明确限制：不允许网页破坏系统级日期输入的安全与一致性。
- 不要写
input[type="date"] { appearance: none; -webkit-appearance: none; }—— 它会让 Safari 降级为纯文本框，失去格式校验、键盘类型切换（数字键盘 → 日历）、无障碍支持 -
::-webkit-calendar-picker-indicator只能控制右侧图标的显隐和滤镜（如filter: invert(1)），不能调整位置、大小或绑定事件 - 任何试图用
::after绝对定位覆盖原生区域的操作，在 iOS Safari 上极易拦截点击，导致唤不起日历
如何安全地“绕过”而非“覆盖”原生 UI
真正可行的路径不是对抗 Safari 的渲染策略，而是让原生控件只负责数据输入，把视觉和交互控制权交还给页面层。
- 用
<input type="text" id="date-input">替代type="date"，移除所有浏览器干预 - 引入轻量库（如
flatpickr或vanillajs-datepicker），初始化时绑定到该text输入框，并设置dateFormat: "Y-m-d" - 手动同步 value：当 flatpickr 选中日期，更新
input.value并派发input事件（input.dispatchEvent(new Event('input', {bubbles: true}))），确保表单验证、框架响应等逻辑不中断 - 保留
required、min、max等属性在input上，由 JS 库读取并用于约束选择范围
iOS Safari 下清除按钮与日历唤起的共存难题
在包裹了自定义清除按钮的方案中，iOS Safari 极易出现“点了清除没反应”或“点了右侧却唤不起日历”的情况——根源是 Safari 对点击热区的严格划分：它要求原生唤起手势必须落在未被遮挡、足够尺寸（≥44×44pt）的可聚焦区域上。
- 清除按钮必须是
<button type="button"></button>，尺寸 ≤24×24px，且右侧留出 ≥8px 安全间距供手指点按 - 绝对定位清除按钮时，父容器需设
position: relative，按钮自身加z-index: 2，但input的z-index必须更高（如z-index: 3），否则点击穿透失败 - 不要监听
input.focus()后自动调click()—— Safari 静默拒绝非用户直接触发的弹窗 - 清除后务必调用
input.dispatchEvent(new Event('input', {bubbles: true}))，否则 React/Vue 等框架不会感知 value 变更
最常被忽略的一点：Safari 的原生日期控件没有“禁用状态下的视觉反馈”，哪怕你加了 disabled，它的样式变化也远不如 Chrome 明显；若依赖 JS 控制启用/禁用，必须同步操作 tabindex 和 aria-disabled，否则键盘用户会卡在不可用的输入框里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
