safari（尤其旧版）不支持标准appearance: none，必须用-webkit-appearance: none；select的height/padding失效需加border-radius: 0；number输入框需额外清除::-webkit-inner/outer-spin-button；ios需同时设transparent背景、透明边框、无轮廓及显式padding/line-height。
为什么Safari里appearance: none看起来没反应
不是你写错了，是 Safari（尤其 macOS 15.4 之前、iOS 15.x 及更早）压根不解析 appearance: none 这个标准属性——它只认 -webkit-appearance: none。漏掉这个前缀，等于对 Safari 下达了一条它听不懂的指令，原生圆角、阴影、箭头、点击区域全部照常渲染。
常见错误现象包括：select 高度和 padding 完全不生效、input[type="number"] 的上下微调按钮还在、button 保留系统级聚焦环和背景色。
-
-webkit-appearance: none必须显式写出，且建议放在声明块最前面（避免被后续规则覆盖） - 即使加了前缀，若未同步重置
border、background、padding和line-height，视觉上仍像“没生效” - Safari 15.4+ 开始支持无前缀写法，但旧版设备存量巨大，不能依赖
select在Safari中height/padding失效的临时解法
Safari 对原生 select 的渲染做了系统级锁定，-webkit-appearance: none 有时也仅部分剥离外观，height 和 padding 依然被忽略。这不是 bug，而是 UA 强制兜底逻辑导致的限制。
一个轻量、实测有效的绕过方式是强制重置圆角：border-radius: 0。在 Safari 15.4–17.x 中，加上这句后，height 和 padding 往往就能正常作用。
- 不要单独依赖
appearance，必须搭配border-radius: 0触发 UA 样式链重排 -
line-height对select无效，必须用height + padding组合控制垂直居中 - 清除后右侧留白会消失，需手动加
padding-right: 2rem为自定义箭头留空间
input[type="number"]的微调按钮怎么彻底干掉
appearance: none（含前缀）只作用于 input[type="number"] 的外层容器，Chrome 和 Safari 的上下微调按钮（spin buttons）是独立伪元素，完全不受影响。你看到的“已重置”，只是假象。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
必须额外清除两个 WebKit 专属伪元素：
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
-
::-webkit-inner-spin-button控制按钮内部结构 -
::-webkit-outer-spin-button控制按钮外层容器 - Firefox 不支持这两个伪元素，无需处理；但需注意
-moz-appearance: textfield才能让 Firefox 真正剥离逻辑 - 清除后若仍有空白，检查是否遗漏
margin: 0—— WebKit 默认给它们设了负边距
移动端 iOS Safari 的硬性重置组合
iOS Safari（尤其是 15.4+）对 appearance 的支持极不稳定，仅写 -webkit-appearance: none 远不够。它会继续叠加 UA 默认的 background-color、border 和 outline，造成视觉残留或失焦卡顿。
以下四项是 iOS 上让控件真正“裸出来”的最低要求，缺一不可：
-
background-color: transparent—— 否则默认浅灰背景与残留阴影叠加，显得浮起 -
border: 1px solid transparent—— 写border: none可能触发回退到原生渲染 -
outline: none—— 否则聚焦时高亮环 + 原生阴影 = 双层灰蒙 -
padding和line-height显式设置 —— UA 默认padding是0.5em，不清除会导致文字贴顶贴底
特别提醒：input[type="date"] 在 iOS Safari 中所有 appearance 设置均被无视，降级为 type="text" + JS 日期选择器才是可靠方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
