表单指定select组件下拉箭头样式设置无效，如何解决？

原生<select>是替换元素，浏览器不允许给它添加:after/:before伪元素，这就是你原来代码失效的核心原因。下面是修正后的可行方案：

修正思路 #

• 隐藏原生select的默认下拉箭头
• 借助父容器.wpcf7-form-control-wrap的伪元素实现自定义箭头（父容器是普通块元素，支持伪元素）
• 给select添加右侧内边距，避免选项文字被箭头遮挡

修改后的完整代码 #

CSS

/* 隐藏原生select默认箭头 */
.wpcf7-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 右侧留空间给自定义箭头 */
  padding-right: 60px;
}

/* 利用父容器伪元素实现自定义箭头 */
.wpcf7-form-control-wrap:after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 25px;
  border: 1px solid #565656;
  background: #0e7b53;
  color: #fff;
  /* 箭头垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  pointer-events: none;
}

input,
select {
  height: 62px;
  width: 100%;
  background: #20232C;
  border: none;
  padding-left: 30px;
  color: #fff;
}

.wpcf7-form-control-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

span {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

HTML（无需修改）

<span class="wpcf7-form-control-wrap" data-name="menu-173">
    <select name="menu-173" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
    <option value="test">test</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
</span>

关键细节说明 #

1. appearance: none：移除浏览器默认的select样式（包括箭头），添加前缀兼容Chrome、Firefox等主流浏览器
2. 父容器设置position: relative，确保伪元素能基于它定位
3. padding-right: 60px：给select右侧预留空间，防止选项文字和自定义箭头重叠
4. 伪元素用flex布局实现箭头居中，比固定padding更适配不同高度的输入框

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