safari 中 select 的 height/padding 不生效是因系统级渲染锁定，appearance: none 失效；加 border-radius: 0 可触发 ua 样式兜底逻辑使其生效，实测 safari 15.4–17.x 有效。
为什么 select 在 Safari 中 height/padding 不生效
不是你写错了，是 Safari（尤其是 macOS 和 iOS）对原生 select 的渲染做了系统级锁定——-webkit-appearance: none 和 appearance: none 在它身上基本失效。即使加了，height、padding、border-radius 仍可能被忽略或表现错乱。
一个最轻量的“修复”是强制重置圆角：border-radius: 0。很多情况下，加上这句后 height 和 padding 就突然能起作用了。这不是标准解法，但它是 Safari 渲染链中某个 UA 样式兜底逻辑被触发的副作用，实测在 Safari 15.4–17.x 均有效。
- 不要只依赖
appearance: none，它在 Safari 中无法真正解除控件绑定 -
line-height对select无效，必须用height + padding组合，且需配合border-radius: 0 - 若用 Flex 布局包裹
select，记得加align-items: center防止垂直错位
select 自定义箭头在 Safari 中不显示或错位
Safari 对 background 图片的解析更严格，尤其当使用 data URL SVG 时，容易因编码、引号或空格导致解析失败。同时，background-position 的百分比计算在 Safari 中有时会和 Chrome 不一致。
推荐写法：background-position: calc(100% - 3px) 50%，并确保 SVG 中无换行、无多余空格，URL 编码用 %3C 替代 ，<code>%3E 替代 >。
- 避免直接写
right 8px center，Safari 可能忽略right关键字 - 用
background-size: 18px显式控制图标大小，别依赖auto - 深色模式下需用
@media (prefers-color-scheme: dark)单独覆盖background-image，否则图标可能变黑不可见
如何让 Safari 下拉菜单选项支持 hover/选中高亮
option:hover 在 Safari 中可用，但 option:checked 完全无效——这不是兼容性问题，而是标准行为。Safari 不暴露 option 的“已选中”状态给 CSS，select.value 才是唯一可靠来源。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
如果需要视觉上区分当前选中项，只能靠 JS：监听 change 事件，读取 select.value，再给对应 option 加 class（如 .selected），并在 CSS 中定义该 class 的样式。注意：这个 class 只在下拉展开时可见，不影响主输入框显示。
- 不要写
option:checked { background: #007bff; }—— Safari 忽略，Firefox 不支持，Chrome 是非标行为 -
select:focus option[value="xxx"]不代表“当前选中”，只是静态匹配，不可用于交互反馈 - 若需完全控制选中态样式（比如加图标、改字体粗细），必须放弃原生
select，用div+ul模拟
移动端 Safari 中 select 点击无反馈或变灰
iOS Safari 对 select、input[type="date"] 等控件有强可访问性保护，一旦你重置了 appearance 或覆盖了太多 UA 样式，它可能直接降级为不可点击状态，甚至背景变灰、文字模糊。
关键底线：保留 cursor: pointer、显式声明 background-color 和 color，禁用 user-select: none。如果用了自定义箭头，务必补全 padding-right（至少 24px），否则点击热区会严重偏移。
- 不要给
select设opacity: 0.99或transform: translateZ(0)—— 可能触发 Safari 的渲染降级路径 - 测试时务必真机连接 Safari 开发者工具，模拟器无法复现所有点击反馈异常
- 若项目必须高度定制，优先考虑封装成 Web Component 或用
react-select/Choices.js这类成熟方案，而非硬啃原生
Safari 的 select 异常从来不是单一 CSS 属性能解决的，它是一整套渲染策略的体现。最稳妥的路径，是把“能否修改”当作一个布尔开关：能接受基础微调（圆角、箭头、hover），就用 CSS + 少量 JS；需要像素级控制（字体、图标、滚动条、多选样式），就得彻底替换。别在 appearance: none 上反复挣扎——它在 Safari 里本就不打算让你赢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
