appearance: none 在 ios 下对原生 无效，因其调用系统 uikit 组件（如 uidatepicker），dom 元素仅作触发器；唯一可样式化的是 ::-webkit-datetime-edit 伪元素，且仅支持文本类属性。
appearance: none 在 iOS 下对原生 <input type="date"> 无效，强行使用反而可能破坏可访问性或触发 Safari 的兼容模式降级。这不是样式没生效，而是你试图重置的对象根本不受 CSS 控制。
为什么 appearance: none 对 iOS 日期控件完全失效
iOS 的 <input type="date"> 渲染不走 WebKit 的标准表单控件绘制流程，而是直接调用系统级 UIKit 组件（如 UIDatePicker）。它的“外观”是原生弹窗，DOM 中的 input 元素仅作为触发器存在，appearance 属性对其无任何作用。
-
appearance: none只影响可被 CSS 直接绘制的控件（如桌面 Chrome 的日期输入框） - 在 iOS Safari 中，该声明会被忽略，但可能意外禁用 focus 状态或触控反馈
- 搭配
all: unset或全局 reset.css 使用时，容易导致tabindex失效、键盘无法唤起、屏幕阅读器读不出 role
真正可控的微调方式：只动 ::-webkit-datetime-edit
iOS（及 Android WebView）允许你有限度地调整日期输入框内显示文本的样式，仅限于 ::-webkit-datetime-edit 伪元素 —— 这是唯一被 Safari 实际响应的日期相关 CSS 钩子。
- 只能修改字体、颜色、padding、text-align 等文本类属性
- 不能改高度、border、背景色（会失效），也不能隐藏或替换整个控件
- 必须配合
direction: ltr和text-overflow: ellipsis防止文字错位
示例：
input[type="date"]::-webkit-datetime-edit {<br> font-size: 16px;<br> color: #333;<br> padding: 8px 12px;<br> direction: ltr;<br>}
遇到样式错乱时优先检查这三件事
很多所谓“样式异常”，其实和 appearance 无关，而是布局或时机问题：
- 父容器未设置
width或min-width，导致 iOS 下 input 自身收缩到极窄，显示被截断 - 使用了
flex布局但未加-webkit-flex前缀，某些 iOS 版本（如 iOS 15.6）会忽略flex: 1 - 动态插入日期控件后未触发重排，需手动调用
el.style.transform = 'translateZ(0)'或getComputedStyle(el).height强制刷新
更彻底的替代方案：放弃原生控件
如果你需要完整控制样式、动画、国际化或与 van-calendar / mui-date-picker 等组件集成，就别碰 <input type="date">。
- 用
<div contenteditable="true"> 模拟输入框，绑定 <code>input和blur事件同步值 - 点击时用 JS 显示自定义日历弹层（如
van-calendar），并确保其popup容器有position: fixed和正确的z-index - 所有自定义控件必须保留
role="textbox"、aria-label和tabindex="0"，否则视障用户无法操作
真正难的不是让样式“看起来像”，而是让行为、语义、可访问性全部对齐原生体验。这点常被跳过，却恰恰是 iOS 用户最敏感的地方。
