Font Awesome 6 select框下拉箭头不显示问题（纯CSS需求）

我有一个select框，想要显示Font Awesome 6的下拉箭头。目前已经编写了代码，但箭头始终不显示，不过网站已经成功加载了Font Awesome 6。想请教问题出在哪？另外希望仅通过纯CSS实现效果，不修改select元素的HTML结构，让所有同类型的select都生效。

用户提供的HTML代码 #

<div class="avada-select-parent">
    <select id="pa_ring-size" class="" name="attribute_pa_ring-size" data-attribute_name="attribute_pa_ring-size" data-show_option_none="yes">
        <option value="">Choose an option</option>
        <option value="14" class="attached enabled">14</option>
        <option value="14-5" class="attached enabled">14.5</option>
    </select>
    <div class="select-arrow" style="height: 38.4px; width: 38.4px; line-height: 38.4px;"></div>
</div>

用户提供的CSS代码 #

/* Style for the select box */
#pa_ring-size {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 1px solid #ddd;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  font-size: 16px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Style for the select arrow using ::after pseudo-element */
#pa_ring-size::after {
  content: '\f0d7'; 
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900; 
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.avada-select-parent {
  position: relative;
  display: inline-block;
}

问题原因 #

1. Select元素不支持伪元素：浏览器原生限制，<select>无法使用::after/::before伪元素，你写的#pa_ring-size::after完全不会生效，这是核心问题。
2. 字体名称可能不匹配：如果网站加载的是Font Awesome 6 Free版本，但CSS里写的是Font Awesome 6 Pro，箭头会无法显示。
3. 现有HTML中的.select-arrowdiv字符乱码，是字体未正确映射导致，但你要求不修改HTML，可通过CSS隐藏该元素。

纯CSS解决方案（不修改HTML，全局生效） #

借助父容器.avada-select-parent的伪元素实现箭头，同时调整选择器实现全局覆盖：

/* 全局Select基础样式：移除默认箭头，统一外观 */
.avada-select-parent select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  border: 1px solid #ddd;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* 利用父容器伪元素添加Font Awesome箭头 */
.avada-select-parent::after {
  content: '\f0d7'; /* Font Awesome下拉箭头的Unicode */
  /* 根据网站加载的版本调整字体名称：Free版用下面的，Pro版改成'Font Awesome 6 Pro' */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; /* Solid样式图标必须设置900权重 */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 避免干扰select的点击交互 */
  color: #666; /* 可自定义箭头颜色 */
}

/* 父容器保持相对定位，确保箭头正确偏移 */
.avada-select-parent {
  position: relative;
  display: inline-block;
}

/* 隐藏原有乱码的箭头div（可选） */
.avada-select-parent .select-arrow {
  display: none;
}

关键注意事项 #

• 确认Font Awesome字体名称与网站加载版本一致：名称错误会导致箭头显示为方块或直接不显示。
• font-weight: 900是必须的，Solid样式的图标依赖这个权重值。
• 使用.avada-select-parent select代替ID选择器，可让所有该父容器下的select自动应用样式，实现全局生效。

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