Style substring in a HTML <option> from a <select>

Question

Styling of items in a option list is easy: use a CSS definition and apply it:

  <select>
  <option>Option 1</option>
  <option style="color: #F00; font-weight: bold; padding-left:2em;">Option 2</option>
  <option>Option 3</option>
  <option style="color: #00F;">Option 4</option>
  <option>Option 5</option>
  </select>

But what is the trick if I just want to highlight parts of a string? For example in this list from the 5th item just the substring "ion 5"? My idea was to use a background image and offset it in a right way. But this seems to be tricky. Has anybody an nifty idea how to do it? Browser would be the current FF. The HTML and style can be be generated on the fly at the backend.

Answer 1

You can't get that granular with your styles on a standard select list. This would require a dynamic replacement (created and controlled with and by Javascript) to stand in place of your standard select, and feed values back and forth.

For instance, the following illustrates my point a bit more clearly. You would have to have a completely different set of HTML elements that you can style in this fashion, for instance, a div containing an unordered list. Note that option 6 is styled with bold text.

<div id="list-simulation">
  <ul>
    <li>Option 4</li>
    <li class="selected">Opt<strong>ion 5</strong></li>
    <li>Option 6</li>
  </ul>
</div>

Attached Javascript-logic intercepts clicks on the list-items, and passes them on to the hidden select menu, which then selects the corresponding option so that form-submission carries over the users decisions.

<select name="real-list">
  <option value="1">Option 4</option>
  <option value="2" selected="selected">Option 5</option>
  <option value="3">Option 6</option>
</select>

Answer 2

I don't believe this can be done with CSS alone. You'd have to use JavaScript.

Answer 3

This is not possible with HTML and CSS .. and neither with simple Javascript .. whatever you may use (I mean dynamic/static content) Ultimately .. you have to write style within a span or a div element .. here the restriction is style has to be done to the list and Option doesn't allow Span or DIV as child elements ..

The alternative is (as suggested by Jonathan) to use completely different javascript event .. which behaves like <Select> but isn't select ..

But in all the ways it requires more effort (burden on designer and also on browser) than usual because it is not the basic requirement of a drop-down list ..

Answer 4

The closest I can come to anything near is still pathetic. I'll post it nevertheless.

Using the the positioning of a background image:

<select>
  <option></option>
  <option>Option 1</option>
  <option style="color: #000; 
        background: #ffffff 
            url(http://i49.tinypic.com/15ybyaw.jpg) 
            repeat-y 2em 0px"
  >Option 2</option>
  <option>Option 3</option>
</select>

It only renders in FF3.5 and not on IE, Chrome etc. And to get the highlight position accurate is another piece of tricky business. Probably works better with fixed-width fonts.

Here's the FF screenshot: