HTML Select item with Icons in addition to just text labels – applying the CSS background-style to the HTML OPTION element

We have been using JIRA for our Incident Management the last six
months or so, and one of the UI features in JIRA that suddenly struck
me as being somewhat odd and primarily quite cool at the same time, was
the Issue Type select-item that not only contained text-labels, as HTML
Select items usually do, but also had icons in them:

HTML Select item with Icons in addition to just text labels - applying the CSS background-style to the HTML OPTION element selectWithIcons

For
me this was a more or less new HTML feature, and one that I would like
to use myself sometime. So I took a look at the HTML source and – of
course – it turned out to be a CSS trick, using the background-image
style on the OPTION elements in the SELECT. I would never had thought
that this CSS style could also be applied to OPTIONs, so once again it
is proved that you should try out everything, including things you know not to be possible. The HTML source from this JIRA item looked as follows:

<select name="issuetype" id="issuetype">
  <option value="1" class="imagebacked" style="background-image: url(/images/icons/bug.gif);" selected>
    Bug
  </option>
  <option value="2" class="imagebacked" style="background-image: url(/images/icons/newfeature.gif);">
    New Feature
  </option>
  <option value="3" class="imagebacked" style="background-image: url(/images/icons/task.gif);">
    Task
  </option>
  <option value="4" class="imagebacked" style="background-image: url(/images/icons/improvement.gif);">
    Improvement
  </option>
</select>

The next step of course is actually using this feature myself in my
own applications and then making the icons dynamic along with the data;
typically the content of a SELECT item will be produced by some backing
bean or other dynamic data source and that bean or that source should
now provide an icon reference in addition to label and value. And it
would be nice to have a JSF component – an extension of UISelectMany or
UISelectOne – that can render the background icon too. The real
challenge is finding some time for this, obviously.

18 Comments

  1. anonymous hero August 23, 2011
  2. anonymous coward January 20, 2011
  3. Wojciech Beling January 11, 2008
  4. Upanisad June 14, 2007
  5. Crash Daemonicus May 17, 2007
  6. NaTaN October 20, 2006
  7. Fab August 19, 2006
  8. Eugene Bond June 20, 2006
  9. Lucas Jellema May 16, 2006
  10. Liz May 16, 2006
  11. maffo March 2, 2006
  12. Josep Sanz February 15, 2006
  13. dana February 7, 2006
  14. Robert Lee February 7, 2006
  15. Tim Blair February 2, 2006
  16. jack February 2, 2006
  17. Paul January 19, 2006
  18. chirag January 17, 2006