Safari中select组件出现灰色异常层如何解决？Chrome无此问题

我之前也踩过Safari表单样式的这个坑！这个灰色层其实是Safari给<select>元素加的默认webkit样式，Chrome已经优化了默认渲染逻辑，但Safari还保留了这些旧的控件装饰。结合你的DOM结构和现有CSS，我给你几个可行的解决方案：

方案一：重置.class2及内部Select的默认外观 #

这个方案是通过强制关闭浏览器的默认表单控件样式来消除灰色层，你可以在.class2的样式中补充这些属性：

.class2 {
  background: 0 0;
  border: none;
  /* 新增：关闭默认控件外观 */
  -webkit-appearance: none;
  appearance: none;
  /* 确保继承父元素的白色背景，避免透出灰色 */
  background-color: inherit;
}

同时，给内部的<select>也加上重置样式，确保彻底覆盖默认效果：

.class2 select {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  width: 100%; /* 让select占满父容器，避免样式错位 */
}

方案二：针对Safari的精准样式修复 #

如果上面的方案还没解决问题，可以尝试用Safari的私有前缀，针对性清除默认阴影和边框：

.class2 select {
  /* 清除默认阴影 */
  -webkit-box-shadow: none;
  box-shadow: none;
  /* 重置圆角，避免和父元素50%圆角冲突透出灰色 */
  -webkit-border-radius: 0;
  border-radius: 0;
  /* 去掉默认的下拉箭头背景图（如果不需要默认箭头的话） */
  background-image: none;
}

补充：保留自定义下拉箭头（可选） #

重置appearance属性后，Safari会去掉默认的下拉箭头，如果你需要保留类似的交互提示，可以自己添加一个自定义箭头：

.class2 {
  position: relative;
  /* 给select留出箭头的空间 */
  padding-right: 30px;
}
.class2::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 确保点击箭头区域也能触发select的下拉 */
  color: #666; /* 自定义箭头颜色 */
}

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