CODEWITHSUNDEEP
htmlcsshtml-selectprototypejs
shanethehat
shanethehat

Reputation: 15560

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?

Upvotes: 0

Views: 864

Answers (1)

Evan Mulawski
Evan Mulawski

Reputation: 55334

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.

Upvotes: 3

Related Questions