Safari开发者工具显示错误CSS值 select设置30px圆角实际渲染5px

这不是Safari开发者工具的bug，是Webkit内核对原生表单控件的固有渲染机制导致的：

• 没有清除原生外观的<select>元素，在Safari中会优先调用系统级的原生控件UI渲染逻辑，你编写的border-radius: 30px虽然在CSS规则层显示覆盖了默认样式，但实际渲染阶段会被原生控件内置的5px圆角强制覆盖，这就是Computed面板显示值和样式来源跳转逻辑错位的核心原因。
• Chrome、Firefox近年放宽了对未重置外观的表单控件自定义样式限制，所以同一段代码在这两个浏览器里能正常显示30px圆角，才会出现跨浏览器表现不一致的问题。

给目标select元素添加外观重置属性即可，核心CSS代码如下：

select {
  /* 清除Webkit内核浏览器的原生控件默认外观 */
  -webkit-appearance: none;
  appearance: none;
  /* 你原本自定义的圆角样式 */
  border-radius: 30px;
  /* 圆角值较大时建议加上，避免内部内容溢出裁切圆角 */
  overflow: hidden;
}

补充说明：添加appearance: none后原生下拉箭头会消失，你可以通过背景图的方式引入自定义箭头图标，通过background-position调整箭头位置，自定义灵活度比原生箭头更高。

• 不要只写-webkit-appearance: none漏掉标准属性appearance: none，否则部分新版本Safari仍可能出现渲染异常
• 如果样式加完还是不生效，优先检查select的父级元素是否设置了overflow: hidden+更小的圆角值，裁切了子元素的显示效果
• iOS端Safari如果还有异常，可以额外添加-webkit-border-radius: 30px做兼容

问题截图1
问题截图2

内容的提问来源于stack exchange，提问作者JordanH