如何用纯CSS居中下拉选择框的文本与箭头？

我尝试用纯CSS让下拉选择框的文本和箭头同时居中，text-align:center只能让文本居中，但箭头还是靠右，当前效果和期望效果如下：

当前效果：

期望效果：

我的HTML代码：

<div class="col-sm-12 mobile-controller">
   <select class="select" id="dropGroup"> 
      <option value="head"> Head/Neck </option>
      <option value="torso"> Shoulders/Torso </option>
      <option value="legs"> Legs/Hips </option>
   </select>
</div>

我的CSS代码：

#mobile #dropGroup {
    width: 100%;
    height: 10vw;
    border-radius: 5px;
}

.select#dropGroup {
    text-align: center;
}

因为浏览器原生的select箭头样式和位置受默认样式限制，很难直接调整到和文本一起居中，这里提供一个可行的纯CSS解决方案：

实现思路 #

通过隐藏原生select箭头，自定义一个可自由定位的箭头元素，从而让文本和箭头达到视觉上的整体居中效果。

修改后的完整代码 #

HTML（给容器新增类用于控制箭头定位）

<div class="col-sm-12 mobile-controller select-wrapper">
   <select class="select" id="dropGroup"> 
      <option value="head"> Head/Neck </option>
      <option value="torso"> Shoulders/Torso </option>
      <option value="legs"> Legs/Hips </option>
   </select>
</div>

CSS

/* 容器设置相对定位，作为自定义箭头的定位基准 */
.select-wrapper {
    position: relative;
    width: 100%;
}

#mobile #dropGroup {
    width: 100%;
    height: 10vw;
    border-radius: 5px;
    /* 跨浏览器隐藏原生下拉箭头 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 文本居中 */
    text-align: center;
    /* 右侧预留箭头位置，避免文本被截断 */
    padding-right: 2em;
    box-sizing: border-box;
}

/* 用伪元素创建自定义下拉箭头 */
.select-wrapper::after {
    content: "▼";
    position: absolute;
    /* 调整箭头的水平位置，根据需求微调 */
    right: 1em;
    /* 垂直居中 */
    top: 50%;
    transform: translateY(-50%);
    /* 箭头样式自定义 */
    color: #666;
    font-size: 0.8em;
    /* 避免箭头干扰select的点击交互 */
    pointer-events: none;
}

说明 #

• appearance: none 用于移除浏览器原生的select样式，需要加前缀兼容webkit和moz内核浏览器。
• 给select设置padding-right是为了避免文本和自定义箭头重叠。
• 伪元素的pointer-events: none确保点击箭头区域时，依然能触发select的下拉展开事件。

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