我被要求生成一个如下所示的选择列表:
我遇到的问题是如何为星号和文本设置不同的颜色。我尝试将星号包裹在各种内联 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
,所以选择似乎没有标有星号会不会让人感到困惑?
最佳答案
option
标签不能包含 HTML 标记,根据 this W3 spec .只有normal character data允许在其中。
解决方法:使用背景图像(星号或其他)(位于左侧)并向 option
元素添加左填充;虽然这可能适用于所有浏览器。
关于html - 突出显示选项标签内的部分文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9626574/