如何在select标签的option中显示box-icon图标？

原生HTML的<option>标签仅支持纯文本内容，无法渲染嵌套的HTML元素（比如box-icon的<i>标签），这就是直接把<i class="bx...">放进option里不生效的原因。

下面提供两种可行的解决方案：

方法一：使用图标对应的Unicode字符 #

BoxIcons本质是字体图标，每个图标都有对应的Unicode编码，直接将编码放入option中，并给select指定boxicons字体即可显示图标：

<select class="form-select form-control" aria-label="Select Icon" id="new_category_icon" style="font-family: 'boxicons', sans-serif;">
  <option value="1">&#xf101;</option> <!-- bx-block的Unicode编码 -->
  <option value="2">&#xf200;</option> <!-- bx-bar-chart-alt-2的Unicode编码 -->
  <option value="3">&#xf200;</option>
</select>

注：每个图标的Unicode编码可在BoxIcons官网对应图标的详情页中找到。

方法二：自定义模拟下拉组件 #

如果需要更灵活的样式（比如图标搭配文字），可以放弃原生select，用HTML元素模拟下拉菜单，这样就能正常使用box-icon标签：

<!-- 自定义下拉容器 -->
<div class="custom-select form-control" id="custom_icon_select">
  <div class="select-trigger">
    <i class="bx bx-block"></i>
    <span>选择图标</span>
  </div>
  <ul class="select-options">
    <li class="option" data-value="1">
      <i class="bx bx-block"></i>
    </li>
    <li class="option" data-value="2">
      <i class="bx bx-bar-chart-alt-2"></i>
    </li>
    <li class="option" data-value="3">
      <i class="bx bx-bar-chart-alt-2"></i>
    </li>
  </ul>
</div>

<!-- 用于表单提交的隐藏输入框 -->
<input type="hidden" id="new_category_icon" name="new_category_icon" value="1">

<style>
.custom-select {
  position: relative;
  cursor: pointer;
}
.select-trigger {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}
.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.custom-select.open .select-options {
  display: block;
}
.option {
  padding: 0.375rem 0.75rem;
  display: flex;
  align-items: center;
}
.option:hover {
  background-color: #f8f9fa;
}
</style>

<script>
const customSelect = document.getElementById('custom_icon_select');
const trigger = customSelect.querySelector('.select-trigger');
const options = customSelect.querySelectorAll('.option');
const hiddenInput = document.getElementById('new_category_icon');

// 展开/收起下拉选项
trigger.addEventListener('click', () => customSelect.classList.toggle('open'));

// 选择选项并更新显示
options.forEach(option => {
  option.addEventListener('click', () => {
    const icon = option.querySelector('i').cloneNode(true);
    const span = trigger.querySelector('span');
    trigger.innerHTML = '';
    trigger.append(icon, span);
    hiddenInput.value = option.dataset.value;
    customSelect.classList.remove('open');
  });
});

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

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