突出显示选项标记内的部分文本

Question

我被要求生成一个如下所示的选择列表：

我遇到的问题是如何为星号和文本设置不同的颜色。我试图将星号包装在各种内联HTML标记中，但似乎任何HTML都被删除了。

HTML：

<select id="select-list">
    <option value='1'><em>*</em>A value</option>
    <option value='2'><span>*</span>Another value</option>
</select>

输出呈现的HTML：

$('select-list').select('option').each(function(element) {
   console.log($(element).innerHTML);
});

  

*值

     

*另一个值

有人能建议这样做吗？使用JavaScript（原型）是可以的，但我不想替换select元素。

演示小提琴：http://jsfiddle.net/ejUvt/2/

编辑：我考虑过从文本中删除星号并改为使用背景图片，但我不确定这对于屏幕用户的可访问性是否有害读者和类似的基于文本的设置？在表格的下方有一条消息说* = required，那么选择似乎没有用星号标记会让人感到困惑吗？

Answer 1

根据this W3 spec，option代码不能包含HTML标记。其中只允许normal character data。

解决方法：使用背景图像（星号或其他）（左侧）并向option元素添加左边距;虽然这可能适用于所有浏览器。