无法为select的option添加:after伪元素，求CSS/jQuery解决方案

咱先把根源说清楚：绝大多数浏览器都不支持给原生<option>元素加伪元素（比如:after），因为表单控件属于浏览器的原生组件，渲染逻辑和普通HTML元素不一样，很多CSS特性都没法作用在上面，所以你写的:after没显示是正常情况。

既然不能修改原有的select HTML，那咱给你两个靠谱的方案，用jQuery+CSS来实现需求：

方案一：用jQuery生成自定义下拉菜单（推荐） #

这个思路是把原生select隐藏，然后用自定义的DOM结构模拟下拉菜单，这样就能完全控制每个选项的样式，包括右侧加带颜色边框的盒子。关键是我们会同步原生select的value，保证表单提交时数据没问题。

代码示例 #

假设你的原生select是这样的（不管它是PHP生成还是啥，不用改）：

<select id="targetSelect">
  <option value="opt1">选项A</option>
  <option value="opt2">选项B</option>
  <option value="opt3">选项C</option>
</select>

jQuery代码

$(document).ready(function() {
  // 获取原生select元素
  const $originalSelect = $('#targetSelect');
  // 创建自定义下拉的容器
  const $customDropdown = $('<div class="custom-dropdown"></div>');
  // 创建选中项的显示框
  const $selectedDisplay = $('<div class="selected-display"></div>')
    .text($originalSelect.find('option:selected').text());
  // 创建选项列表容器
  const $optionsContainer = $('<div class="options-container"></div>');

  // 遍历原生的每个option，生成自定义选项
  $originalSelect.find('option').each(function() {
    const $customOption = $('<div class="custom-option"></div>')
      .text($(this).text())
      .data('value', $(this).val());
    
    // 添加右侧的颜色边框盒子
    const $colorBox = $('<span class="color-box"></span>');
    // 这里可以根据option的value或者文本设置不同边框色，示例按value区分
    switch($(this).val()) {
      case 'opt1':
        $colorBox.css('border-color', '#ff4444');
        break;
      case 'opt2':
        $colorBox.css('border-color', '#0099cc');
        break;
      case 'opt3':
        $colorBox.css('border-color', '#7cb342');
        break;
    }
    $customOption.append($colorBox);
    $optionsContainer.append($customOption);
  });

  // 把自定义下拉组件组装起来，插入到原生select后面，然后隐藏原生select
  $customDropdown.append($selectedDisplay).append($optionsContainer);
  $originalSelect.after($customDropdown).hide();

  // 点击选中框，切换选项列表的显示/隐藏
  $selectedDisplay.click(function() {
    $optionsContainer.toggle();
  });

  // 点击自定义选项时，更新选中框文本和原生select的value
  $optionsContainer.on('click', '.custom-option', function() {
    const selectedText = $(this).text();
    const selectedValue = $(this).data('value');
    $selectedDisplay.text(selectedText);
    $originalSelect.val(selectedValue);
    $optionsContainer.hide();
  });

  // 点击页面其他区域，隐藏选项列表
  $(document).click(function(e) {
    if (!$(e.target).closest('.custom-dropdown').length) {
      $optionsContainer.hide();
    }
  });
});

对应的CSS样式

.custom-dropdown {
  position: relative;
  width: 220px;
  font-size: 14px;
  font-family: sans-serif;
}

.selected-display {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.options-container {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
  background: white;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

.custom-option {
  padding: 8px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-option:hover {
  background-color: #f5f5f5;
}

.color-box {
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 3px;
}

方案二：纯CSS的折中方案（仅适合选中项显示颜色盒） #

如果你的需求只是在select的当前选中项右侧显示颜色盒子，而不是下拉列表里的每个选项，那可以用纯CSS实现：给select外面加个容器，用:after伪元素在容器右侧显示颜色盒，然后根据select的选中value来切换颜色。不过这个方案没法实现下拉列表里的每个选项都带颜色盒，只能处理选中状态。

代码示例 #

/* 给select套个容器（如果原HTML没有，用jQuery动态加，不修改原select） */
.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-wrapper:after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-radius: 2px;
}

/* 根据选中的value切换颜色，这里需要知道option的value对应的颜色 */
.select-wrapper select[value="opt1"] ~ :after {
  border-color: #ff4444;
}
.select-wrapper select[value="opt2"] ~ :after {
  border-color: #0099cc;
}
.select-wrapper select[value="opt3"] ~ :after {
  border-color: #7cb342;
}

然后用jQuery给原生select套个容器：

$(document).ready(function() {
  $('#targetSelect').wrap('<div class="select-wrapper"></div>');
});

总结 #

如果要实现下拉列表里每个选项右侧都带颜色边框盒子，方案一是最靠谱的，因为它完全脱离了原生select的限制，自定义的DOM可以随意加样式；方案二只能处理选中项，适合需求简单的场景。

内容的提问来源于stack exchange，提问作者Giannis G.