Safari 11中select元素text-align:center属性失效问题求助

我之前在Safari 11上处理select文本居中时也遇到过一模一样的糟心事！原生的text-align:center甚至-webkit-center完全被忽略，调内边距又容易因为选项长度不同导致视觉错位，太闹心了。这里给你两个亲测有效的方案，从简单到兼容拉满：

方案一：尝试text-align-last属性 #

Safari 11对text-align的支持确实拉胯，但对text-align-last（包括-webkit前缀版本）的支持还行，可以先试试这个轻量方案：

select {
  /* 基础布局设置 */
  width: 200px;
  padding: 8px;
  /* 核心兼容代码 */
  text-align: center;
  text-align-last: center;
  -webkit-text-align-last: center;
}

这个方案不需要额外结构，纯CSS解决，但要注意：如果你的select选项里有换行或者超长文本，可能效果会打折扣，不过大部分常规场景足够用。

方案二：容器模拟法（兼容所有老版本Safari） #

如果方案一不管用，那这个“障眼法”绝对能解决问题——用一个透明的原生select覆盖在自定义的文本显示容器上，既保留select的交互性，又能完全控制文本的居中样式：

HTML结构 #

<div class="custom-select">
  <!-- 透明的原生select，负责交互逻辑 -->
  <select class="native-select" onchange="syncSelectText(this)">
    <option value="opt1">短选项</option>
    <option value="opt2">这个选项文本特别长</option>
    <option value="opt3">中等长度选项</option>
  </select>
  <!-- 负责显示居中文本的容器 -->
  <div class="select-display">短选项</div>
</div>

CSS样式 #

.custom-select {
  position: relative;
  display: inline-block;
  /* 模拟原生select的基础外观 */
  border: 1px solid #aaa;
  border-radius: 4px;
  min-width: 200px;
  background-color: #fff;
}

.native-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* 确保select层级高于文本容器，能被点击 */
  z-index: 1;
}

.select-display {
  padding: 8px 12px;
  text-align: center;
  /* 处理超长文本溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 可选：添加下拉箭头模拟原生select样式 */
.custom-select::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #666;
  pointer-events: none;
}

JavaScript同步文本 #

function syncSelectText(selectElement) {
  const displayElement = selectElement.nextElementSibling;
  displayElement.textContent = selectElement.options[selectElement.selectedIndex].text;
}

这个方法的核心是让用户看起来点击的是居中的文本，但实际交互的是完全透明的原生select，既解决了Safari的兼容问题，还能自定义select的外观，简直一举两得！

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