tags:

views:

25

answers:

2

I have a SELECT list with serveral OPTION elements. Here is my naive approach to styling part of the option text:

<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>

This does not work: the browser does not like a SPAN element inside the OPTION element.

Is there some other way to style part of an OPTION element's text?

+1  A: 

Nope. options are styled in a way native to the platform, and styling only a part of one doesn't work. (It usually wouldn't be a particularly good idea either.)

Ms2ger
A: 

As ms2ger said, options can't be styles all that well. However, you CAN control how they are displayed to a point. What is to stop you from moving your span until after the tag?

Matt
I do not understand where you are suggesting moving the span tag. Outside of the <option>..</option> element?
rlandster
Yes.<option value="0">red</option> <span style="font-weight: bold;">SLOW</span><option value="1">blue</option> <span style="font-weight: bold;">SLOWER</span>
Matt Dawdy
But those are different options. My intention is that "red SLOW" is the label for a _single_ option.
rlandster