Выделите часть текста в качестве опции тега

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.

Demo скрипку: http://jsfiddle.net/ejUvt/2/

Edit: Я рассмотрел удаление звездочки из текста и использовать фоновое изображение вместо этого, но я не уверен, если это будет плохо с точки зрения доступности для пользователей с программами для чтения с экрана и аналогичными текстовыми настройками? Далее в форме появляется сообщение о том, что * = required, так что было бы странно, что выбор не помечен звездочкой?

Answer 1

Теги option не могут содержать разметку HTML, согласно this W3 spec. В них разрешено только normal character data.

Обходной путь: используя фоновое изображение (звездочки или что-то еще) (слева) и добавьте левую обивку к элементу option; хотя это может работать во всех браузерах.