选项标签

问题描述：

我已经要求出示选择列表看起来像这样中突出显示文本的一部分：选项标签

enter image description here

我遇到的问题是如何设置不同的颜色的星号和文本。我试图用各种内联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元素。

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

看到你使用的原型/ jscript你不只是创建/找到一个看起来像一个下拉式的东西。 – Mayhem50 2012-03-09 04:11:16

我可以，并且将基于屏幕的浏览器不支持选择元素的CSS样式。所以，IE shanethehat 2012-03-09 08:10:15

答

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

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