在Safari、IE浏览器中select元素text-align:center失效的技术求助

嘿，这个问题我之前做项目时也踩过坑！Safari和IE对原生<select>的text-align:center支持确实有不少兼容性问题，text-align-last:center在这俩浏览器里基本起不到作用。给你几个亲测有效的解决方案：

方案1：针对IE的专属修复 #

IE的<select>内部文本是由::-ms-value这个伪元素控制的，直接给它设置居中就能解决：

/* 仅对IE10+生效 */
select::-ms-value {
  text-align: center;
}

这个方法不用修改原生select的外观，只针对文本居中生效，很适合不想改样式的场景。

方案2：针对Safari的修复（保留原生功能） #

Safari对原生select的文本居中支持很差，我们可以通过去掉原生外观+自定义样式来实现：

select {
  text-align: center;
  /* 去掉Safari的原生下拉样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 自定义下拉箭头（可替换成你需要的样式） */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><polygon points="70,95 20,45 120,45" fill="%23666"/></svg>') no-repeat right 12px center;
  background-size: 14px;
  /* 给箭头预留空间，避免文本被遮挡 */
  padding-right: 35px;
}

如果不想自定义箭头，也可以用padding模拟居中的方法：根据select的宽度和文本长度，设置左右相等的padding值，比如：

select {
  width: 220px;
  /* 计算左右padding，让文本居中，数值根据实际文本调整 */
  padding-left: calc(50% - 50px);
  padding-right: calc(50% - 50px);
}

这个方法更简单，但缺点是文本长度变化时需要调整padding值。

方案3：跨浏览器通用的自定义select（彻底解决） #

如果上面的方法都满足不了需求，你可以用一个容器包裹select，隐藏原生select，用div模拟下拉框的外观，这样完全可控，所有浏览器都能完美居中。核心思路是：

• 用一个div作为外观容器，设置text-align:center
• 把原生select设置为opacity:0，绝对定位覆盖在容器上，保留原生的下拉交互功能

示例代码：

<div class="select-wrapper">
  <select>
    <option>选项1</option>
    <option>很长的选项内容</option>
    <option>选项3</option>
  </select>
  <span class="select-text">选项1</span>
</div>

.select-wrapper {
  position: relative;
  display: inline-block;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 30px;
  cursor: pointer;
}

.select-wrapper select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.select-wrapper .select-text {
  pointer-events: none;
}

然后配合JS同步选中的文本，这样就能实现完全自定义的居中下拉框，所有浏览器都兼容。

你可以根据自己的项目需求选择合适的方案，我之前在处理兼容问题时，用方案2解决了大部分场景，方案3则适合需要高度自定义样式的情况～

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