本文介绍在 android 和 ios 的 webview 中彻底隐藏 `` 默认日历图标的 css 解决方案，通过精准选择器覆盖 webkit 内核的伪元素样式，兼容主流 webview 环境。
在混合开发（如 Cordova、Capacitor、React Native WebView 或原生 WebView 嵌入 H5 页面）中，<input type="date"> 在 iOS 和 Android WebView 中会默认渲染一个带有下拉箭头或日历图标的 UI 元素（即 ::-webkit-calendar-picker-indicator）。许多开发者尝试使用通用选择器如 input[type="date"] { -webkit-appearance: none; } 或对父容器设置 display: none，但均无法真正移除该图标——因为该图标是 WebKit 专有伪元素，需显式针对其声明样式。
✅ 正确且经实测有效的解决方案如下：
input[type="date"]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
display: none;
}⚠️ 注意事项：
- 必须使用完整的伪元素选择器 ::-webkit-calendar-picker-indicator，仅写 ::before 或 ::after 无效；
- -webkit-appearance: none 是关键，它重置了浏览器对该控件的默认外观控制；
- display: none 进一步确保图标不可见（部分旧版 WebView 中仅设 appearance 可能残留空白占位）；
- 该规则仅作用于基于 WebKit 的 WebView（包括 Safari、Chrome for Android、iOS WKWebView 及大多数 Android System WebView），不适用于 Firefox 或非 WebKit 内核；
- 若页面存在 CSS 预处理器（如 Sass），请确保该规则未被作用域隔离或优先级覆盖；建议将其置于全局基础样式或添加 !important（仅当必要时）以提升权重。
? 补充建议：
为保证跨平台一致性与更好控制体验，推荐配合自定义日期选择逻辑（如使用 flatpickr 或 vanilla-datepicker 等轻量 JS 库），并禁用原生唤起：
<input type="date"
onfocus="this.blur()"
readonly
onclick="showCustomDatePicker()" />这样既规避了平台差异，又提升了 UX 统一性。最终，上述 CSS 规则是实现「无感隐藏」原生日历图标的最小可行解，简洁、可靠、无需 JS 干预。
