title: Style substring in a HTML <option> from a <select>
body: <p>Styling of items in a option list is easy: use a CSS definition and apply it:</p>
  
  <pre><code>  &lt;select&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option style="color: #F00; font-weight: bold; padding-left:2em;"&gt;Option 2&lt;/option&gt;
    &lt;option&gt;Option 3&lt;/option&gt;
    &lt;option style="color: #00F;"&gt;Option 4&lt;/option&gt;
    &lt;option&gt;Option 5&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>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.</p>