Bootstrap 4的Select组件在Safari中样式与其他浏览器不一致如何修复

Mac端Safari默认会对<select>元素启用系统原生UI渲染逻辑，会覆盖Bootstrap设定的部分样式，因此会出现和同样式类的<input>显示效果不一致的问题。

添加自定义CSS #

将以下代码加入你项目的全局样式文件中即可：

/* 清除各浏览器下拉框默认样式 */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 自定义下拉箭头，可修改fill值调整箭头颜色 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 8px 10px;
  /* 调整右内边距避免文字覆盖箭头 */
  padding-right: 1.75rem;
}
/* 兼容IE浏览器，隐藏原生下拉箭头 */
select.form-control::-ms-expand {
  display: none;
}

如果页面中同时使用了不同尺寸的表单控件，可单独对应调整padding-right和background-position的数值适配即可。

调整后Safari下的下拉框会完全应用Bootstrap的form-control、border-0、shadow等样式定义，和Chrome、Firefox的显示效果保持统一。

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