Highlight part of the text within an option tag

I have been asked to produce a select list that looks like this:

enter image description here

The problem I'm having is how to set a different colour for the asterisk and the text. I've tried to wrap the asterisk in various inline HTML tags, but it seems that any HTML is stripped out.

HTML:

<select id="select-list">
    <option value='1'><em>*</em>A value</option>
    <option value='2'><span>*</span>Another value</option>
</select>

Output the rendered HTML:

$('select-list').select('option').each(function(element) {
   console.log($(element).innerHTML);
});

*A value

*Another value

Can anyone suggest a technique for doing this? It's OK to use JavaScript (prototype), but I do not want to replace the select element.

Demo fiddle: http://jsfiddle.net/ejUvt/2/

Edit: I have considered removing the asterisk from the text and using a background image instead, but I'm not sure if this would be a bad thing in terms of accessibility for users with screen-readers and similar text-based setups? Further down the form there is a message saying that * = required, so would it be confusing that the select did not seem to be marked with an asterisk?

Solution

The option tags cannot contain HTML markup, as per this W3 spec. Only normal character data is permitted inside them.

A workaround: using a background image (of an asterisk, or whatever) (positioned left) and add left padding to the option element; though this may work in all browsers.