html - 有什么方法可以将两个不同的字体系列添加到选择选项中？

Question

我知道您不能将<span>元素放在 a 中<option>，但是有没有办法在<option>元素中添加不同字体系列的 unicode？例如：

<select>
 <option value="email">&#xe010; Receive by email</option>
</select>

这部分代码是与其余文本&xe010不同的字体系列。<option>

Answer 1

在这里总是用 Javascript 完成魔术是一个技巧，但只要包含的文本不能仅用于显示，它实际上是无用的 =)

试试这个片段[编辑 使用（+）按钮或双击任何选项]

$(document).ready(function() {
  function newchild() {
    var nwchild = document.createElement('option');
    nwchild.name = "Magic";
    nwchild.textContent = "E-mail:";
    nwchild.style.border = '1px solid #dcdcdc';
    nwchild.style.borderRadius = '6px';
    nwchild.innerHTML += '<span style="position:relative;text-decoration:underline;padding-left:5px;;color:red;font-size:0.75rem;">New@E-mail.com</span>';
    return nwchild;
  }
  var slct = document.getElementById('slct');
  var bttn = $("input[type='button']");

  bttn.on('click', function() {
    slct.appendChild(newchild());
  });
  $("#slct").change(function() {
    var chld = $("#slct").children('option:selected');
   
    chld.dblclick(function() {
      slct.appendChild(newchild());
    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="slct" size="5" style="height:50%;width:50%;">
  <option>E-mail:</option>
  <option>Name:</option>
</select>
<input type="button" value="(+)" name="Append" />