html - 突出显示选项标签内的部分文本

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);
});

*A value

*Another value

谁能推荐一种技术来做到这一点？使用JavaScript(原型(prototype))是可以的，但我不想替换select元素。

演示 fiddle :http://jsfiddle.net/ejUvt/2/

编辑:我考虑过从文本中删除星号并改用背景图片，但我不确定这对于屏幕用户的可访问性而言是否是一件坏事-读者和类似的基于文本的设置？在表单的下方有一条消息说 * = required，所以选择似乎没有标有星号会不会让人感到困惑？

Answer 1

option 标签不能包含 HTML 标记，根据 this W3 spec .只有normal character data允许在其中。

解决方法:使用背景图像(星号或其他)(位于左侧)并向 option 元素添加左填充；虽然这可能适用于所有浏览器。