ios safari 对 select、date、number 等控件系统级锁定，-webkit-appearance: none 与 appearance: none 均无效；重置后需手动补全 background、border、padding、cursor 等样式；select/date 等应避免重置，改用语义化模拟方案并确保可访问性。
为什么 -webkit-appearance: none 加了却没用
不是你漏写了 appearance: none，而是 iOS Safari 对部分控件做了系统级锁定。比如 <select></select>、<input type="date">、<input type="number"> 这些控件，即使同时写了 -webkit-appearance: none 和 appearance: none，下拉箭头、灰暗文字、圆角边框依然在——Apple 明确限制 Web 页面接管其可访问性相关渲染逻辑。
常见错误现象包括：控件点击无反馈、background-color 不生效、border-radius: 0 失效、甚至整个控件变不可点击。这不是 CSS 写错，是 Safari 主动降级或拦截样式应用。
-
<button></button>、<input type="text">、<textarea></textarea>、<input type="checkbox">在 iOS ≥16.4 中配合双属性才可能生效 -
<input type="tel">或<input type="email">强行重置可能导致软键盘不弹出，应避免 - 仅写
appearance: none而不加-webkit-appearance: none，在 iOS Safari 中完全无效
-webkit-appearance: none 必须和哪些样式一起用
重置后原生默认样式全被剥离，按钮会“消失”，输入框文字贴边，焦点态丢失——必须手动补全基础视觉层：
- 显式设置
background-color和border，否则控件透明不可见 - 重定义
padding，iOS 原生<button></button>内边距较大，清空后文字紧贴边缘 - 加
cursor: pointer，否则鼠标悬停无反馈 - 对
<input type="submit">等，建议直接换成<button type="submit"></button>，更稳定 - 若用
<input type="button">，需额外尝试-webkit-border-radius: 0（仅 iOS 有效，非标准）
典型写法：
button,
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
background-color: #007aff;
border: 1px solid #007aff;
padding: 12px 20px;
cursor: pointer;
}
哪些控件根本不该碰 appearance
不是所有表单元素都适合重置。强行干预反而破坏功能或可访问性：
-
<select></select>：隐藏后必须另起一层 DOM 模拟下拉，并维持tabindex="0"、键盘导航（↑↓Enter）、role="combobox"和aria-expanded同步 -
<input type="date">：放弃 UI 自定义，只微调内部文本样式，例如<input type="date">::-webkit-datetime-edit（仅 Chrome/Android WebView 支持） -
<input type="range">：Android Chrome 85+ 已限制-webkit-appearance效果，重置易导致拖动卡顿 - 全局写
* { appearance: none }或all: unset：会破坏<input type="checkbox">的圆点形态，且无法恢复；还可能触发 Safari 兼容模式降级
真正有效的移动端表单样式控制路径
别把时间耗在“怎么让 appearance 对 <select></select> 生效”上。可行路径是绕过或最小化干预：
- 用
<div contenteditable="true"> 模拟 <code><input type="text">，再用 JS 绑定input事件同步值（注意blur时校验） - 对
<select></select>，用visibility: hidden隐藏原生控件，另起一层<div> 实现菜单，但必须保留 <code>role和aria-属性，否则屏幕阅读器失焦 - 日期类控件统一用
<input type="date">，接受系统原生体验；若需格式提示，用 placeholder 或旁注文案，而非覆盖 UI - 所有自定义方案都要测试 VoiceOver、Switch Control 等辅助技术是否仍能操作
最常被忽略的点是：可访问性不是附加项，而是重置样式的前提条件。一旦去掉原生控件，就必须自己承担 focus 管理、键盘交互、状态同步和语义暴露的全部责任。
