appearance: none 在移动端必须加 -webkit-appearance: none 前缀，因 iOS 15.4 前及 Android 4.4 WebView 不支持无前缀写法；需按 -webkit-appearance: none; appearance: none; 顺序书写以兼顾新旧浏览器。
appearance: none 为什么在移动端必须加前缀
移动端 Safari 和旧版 Android WebView 对 appearance 支持不完整，直接写 appearance: none 在 iOS 15.4 之前、Android 4.4 WebView 中会完全失效。必须补全私有前缀才能真正隐藏原生控件。
-
-webkit-appearance: none是 Safari/iOS 必须项，漏掉会导致input[type="date"]仍显示日历图标、select留下残影 -
-moz-appearance: none对 Firefox for Android 有效，但现代版本已支持标准属性，可选加 - Chrome for Android 自 Chrome 89 起已支持无前缀写法，但为兼容存量 WebView，建议保留
-webkit- - 不要只写前缀不写标准属性——否则新浏览器可能忽略，应按
-webkit-appearance: none; appearance: none;顺序书写
select 在 iOS 上重置后为何右侧留白或错位
iOS 的 select 即使加了 appearance: none，其内部渲染仍会保留原生下拉区域宽度，导致右侧出现不可见空白，或自定义箭头偏移。这不是 bug，是 WebKit 渲染层残留行为。
- 必须显式设置
padding-right（如0.75rem），为自定义箭头留出确定空间，不能依赖 background-position 拉伸 - 用
background-image替代伪元素：iOS 对::after在select上的支持极差，且无法精确控制垂直居中 - 箭头 SVG 的
viewBox建议设为"0 0 20 20"，配合background-size: 1em才能随字体缩放，避免高清屏模糊 - 测试时务必真机连 Safari 开发者工具调试，模拟器常掩盖该问题
input[type="number"] 在 iOS 上增减按钮消失或变色
iOS WebKit 会把 input[type="number"] 的上下箭头当作文本一部分渲染，其颜色由 color 属性决定，而非 border 或 background。设了深色文字但没调箭头色，看起来就像“按钮没了”。
- 统一处理方式：加
color: var(--input-text-color, #1f2937);，确保箭头与文字同色 - 若需隐藏箭头，仅靠
appearance: none不够，必须额外加&::-webkit-inner-spin-button { appearance: none; } - 注意
font-size影响箭头大小：iOS 下font-size: 14px时箭头最小，16px以上会明显放大，建议固定为14px或使用rem配合根字号控制 - 禁用状态
:disabled下箭头仍可能响应点击，需配合pointer-events: none彻底拦截
focus-visible 在移动端是否可靠
移动端没有传统键盘焦点流，:focus-visible 在 iOS 和 Android 浏览器中触发逻辑混乱：Safari 16.4+ 仅在辅助功能开启时生效，Chrome for Android 则常把触摸点击也误判为“可见焦点”，导致 outline 闪现又消失。
立即学习“前端免费学习笔记（深入）”；
- 生产环境别依赖
:focus-visible控制焦点样式，改用:focus+outline: none+ 自定义box-shadow或border-color - 若坚持用
:focus-visible，必须 fallback：input:focus:not(:focus-visible) { outline: none; }防止双焦点环 - 触摸设备上，用户更依赖视觉反馈而非轮廓线，建议优先增强
:active态（如背景微调、边框压感）提升点击确认感 - 可访问性底线：即使不用 outline，也要确保聚焦时有足够对比度的 border 变化（至少 3:1），WCAG 2.1 AA 要求如此
appearance: none 的“部分生效”——它删掉了控件外观，但没删掉控件内在尺寸逻辑。所以 padding、line-height、font-size 必须全部显式声明，一个都不能靠继承。 
