选项标签

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（prototype），但我不想替换select元素。

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

编辑：我已经考虑去除文本中的星号，并使用背景图片来代替，但我不知道这将是可访问的方面是坏事用户使用屏幕阅读器和类似的基于文本的设置？进一步在表单中有一条消息说* = required，如果选择似乎没有标记星号，那么会是混淆的吗？

Answer 1

option标记不能包含HTML标记，根据this W3 spec。里面只允许有normal character data。

解决方法：使用背景图像（星号或其他）（位于左侧）并将左侧填充添加到option元素;尽管这可能适用于所有浏览器。