有没有办法将两种不同的字体族添加到一个选择选项中

Question

我知道不能在<option>中放入<span>元素，但有没有办法在<option>元素中添加不同字体族的unicode？例如：

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

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

Answer 1

总是用Javascript完成的魔术是一个技巧，但只要包含的文本不能仅用于show＝(，它实际上就没有用

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

$(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;">[e-mail]</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" />