Twemoji在select的option下拉框中无法渲染为自定义表情的问题求助

原生<option>是浏览器高度管控的表单元素，它不允许内部嵌入<img>标签——而Twemoji的核心逻辑就是把文本表情替换成加载Twemoji资源的<img>，所以直接调用twemoji.parse()处理<option>根本行不通。

要实现需求，只能放弃原生<select>，改用自定义下拉组件，以下是一个简单的实现示例：

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<style>
  .custom-select {
    position: relative;
    width: 120px;
    margin: 10px 0;
  }
  .select-trigger {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: white;
    display: none;
    max-height: 200px;
    overflow-y: auto;
  }
  .select-options.active {
    display: block;
  }
  .option-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .option-item:hover {
    background: #f0f0f0;
  }
</style>
<body>
  <div style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
    <div>
      <p>😍</p>
      <div class="custom-select">
        <div class="select-trigger" data-value="love">😍 喜欢</div>
        <div class="select-options">
          <div class="option-item" data-value="love">😍 喜欢</div>
        </div>
      </div>
    </div>
    <div>
      <p>😎</p>
      <div class="custom-select">
        <div class="select-trigger" data-value="cool">😎 酷炫</div>
        <div class="select-options">
          <div class="option-item" data-value="cool">😎 酷炫</div>
        </div>
      </div>
    </div>
    <div>
      <p>😭</p>
      <div class="custom-select">
        <div class="select-trigger" data-value="sob">😭 难过</div>
        <div class="select-options">
          <div class="option-item" data-value="sob">😭 难过</div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  // 解析所有表情为Twemoji
  twemoji.parse(document.body);

  // 绑定自定义下拉的交互逻辑
  const triggers = document.querySelectorAll('.select-trigger');
  triggers.forEach(trigger => {
    trigger.addEventListener('click', () => {
      const options = trigger.nextElementSibling;
      options.classList.toggle('active');
    });
  });

  // 点击选项时更新触发器内容并关闭下拉
  const options = document.querySelectorAll('.option-item');
  options.forEach(option => {
    option.addEventListener('click', () => {
      const trigger = option.parentElement.previousElementSibling;
      trigger.textContent = option.textContent;
      trigger.dataset.value = option.dataset.value;
      option.parentElement.classList.remove('active');
    });
  });

  // 点击外部关闭下拉
  document.addEventListener('click', (e) => {
    if (!e.target.closest('.custom-select')) {
      document.querySelectorAll('.select-options.active').forEach(el => {
        el.classList.remove('active');
      });
    }
  });
</script>

这个自定义组件用普通div元素模拟下拉菜单，完全不受原生表单元素的限制，Twemoji可以正常把表情替换成图片。你还可以根据需求调整样式和交互逻辑。

内容的提问来源于stack exchange，提问作者ahmed-el-awad