如何为select下拉菜单的选项添加左右位置的文本内容？

原生<select>的<option>元素样式限制较多，直接给选项右侧添加文本有兼容性问题，以下提供两种可行方案：

方案一：CSS伪元素技巧（兼容性有限） #

部分现代浏览器支持给<option>添加伪元素，可利用data-*属性存储右侧文本，通过::after渲染出来。但注意Safari及旧版浏览器不支持此特性。

修改后的代码：

.price-dropdown.facebook {
  padding: 0.2em 0.5em 0.2em 2em;
  background-image: url(https://dev.sidesmedia.com/wp-content/uploads/2022/08/website-24x24-1-24x24.png);
  background-repeat: no-repeat;
  background-size: 0.8em auto;
  background-position: 0.4em center;
  font-size: 1.3em;
}

/* 给选项添加右侧价格文本 */
.price-dropdown.facebook option::after {
  content: attr(data-price);
  float: right;
  margin-left: 2em;
  color: #666;
}

<select class="price-dropdown select facebook">
  <option value="" selected disabled>--- Select Quantity ---</option>
  <option selected value="9.99" data-price="$9.99">250</option>
  <option value="18" data-price="$18">500</option>
  <option value="29" data-price="$29">1000</option>
  <option value="54" data-price="$54">2000</option>
  <option value="69" data-price="$69">5000</option>
</select>

方案二：自定义下拉组件（兼容性强，效果可控） #

这是最稳妥的方案，用HTML+CSS+JS模拟下拉菜单，完全自定义布局，同时保留原生<select>用于表单提交，不影响表单功能。

代码示例：

<style>
/* 自定义下拉容器 */
.custom-dropdown {
  position: relative;
  width: fit-content;
  font-size: 1.3em;
}
/* 下拉触发按钮 */
.dropdown-trigger {
  padding: 0.2em 0.5em 0.2em 2em;
  background-image: url(https://dev.sidesmedia.com/wp-content/uploads/2022/08/website-24x24-1-24x24.png);
  background-repeat: no-repeat;
  background-size: 0.8em auto;
  background-position: 0.4em center;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 150px;
}
/* 下拉箭头 */
.dropdown-trigger::after {
  content: "▼";
  font-size: 0.8em;
  margin-left: 1em;
}
/* 下拉菜单 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  z-index: 100;
}
/* 菜单选项 */
.dropdown-menu li {
  padding: 0.2em 0.5em 0.2em 2em;
  background-image: url(https://dev.sidesmedia.com/wp-content/uploads/2022/08/website-24x24-1-24x24.png);
  background-repeat: no-repeat;
  background-size: 0.8em auto;
  background-position: 0.4em center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.dropdown-menu li:hover {
  background-color: #f5f5f5;
}
/* 显示菜单 */
.custom-dropdown.open .dropdown-menu {
  display: block;
}
/* 隐藏原生select */
.custom-dropdown select {
  display: none;
}
</style>

<div class="custom-dropdown">
  <div class="dropdown-trigger">--- Select Quantity ---</div>
  <ul class="dropdown-menu">
    <li data-value="9.99">250 <span>$9.99</span></li>
    <li data-value="18">500 <span>$18</span></li>
    <li data-value="29">1000 <span>$29</span></li>
    <li data-value="54">2000 <span>$54</span></li>
    <li data-value="69">5000 <span>$69</span></li>
  </ul>
  <!-- 保留原生select用于表单提交 -->
  <select class="price-dropdown select facebook" name="quantity">
    <option value="" selected disabled>--- Select Quantity ---</option>
    <option value="9.99">250</option>
    <option value="18">500</option>
    <option value="29">1000</option>
    <option value="54">2000</option>
    <option value="69">5000</option>
  </select>
</div>

<script>
const dropdown = document.querySelector('.custom-dropdown');
const trigger = dropdown.querySelector('.dropdown-trigger');
const menuItems = dropdown.querySelectorAll('.dropdown-menu li');
const hiddenSelect = dropdown.querySelector('select');

// 切换下拉菜单显示
trigger.addEventListener('click', () => {
  dropdown.classList.toggle('open');
});

// 选择选项后更新触发文本和原生select值
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    const value = item.dataset.value;
    const fullText = item.textContent.trim();
    trigger.textContent = fullText;
    hiddenSelect.value = value;
    dropdown.classList.remove('open');
  });
});

// 点击外部关闭菜单
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.remove('open');
  }
});
</script>

这个方案可以完美实现你想要的「左侧图标+右侧文本」效果，且在所有主流浏览器中都能正常工作。

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