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

18

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:

 

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:....

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

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.

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.

18 Comments

  1. use something like this:
    .imagebacked {
    padding-left: 26px; /* image-width */
    background-repeat: no-repeat;
    }
    it works for me, thanks for nice post by the way

  2. This trick is basically useless. It doesn’t work in IE, Opera and Safari. The only browser that makes it work is Firefox. You’ll probably need a more complex JS trick to get it properly done.

  3. Quote by Robert Lee: “Internet Explorer won’t support the content style until IE7.”
    Im on IE7 full release and select/option background images still aren’t supported. Too bad really…

  4. Does anybody
    knows how to make this work in IE? It seems to work weel in IE 7.0 but but not in previous versions… I can´t see a way around this at all….

    tnx

  5. To display the selected icon in the selectbox as well, simply add something like this to the onclick attributes of the option-tags:
    onclick=”this.parentNode.setAttribute(‘style’,this.getAttribute(‘style’));”

    css-class for select-tag:
    select.imagebacked {
    padding: 2px 0 2px 20px;
    background-repeat: no-repeat;
    background-position: 1px 2px;
    vertical-align: middle;
    }

    onload you have to set the bg-image of the selected option to the selectbox as well

  6. Eugene Bond on

    It will not never work in IE because of IE engine.
    IE uses special stupid elements for SELECT boxes (I think you know: if you try to put layer over select element – select will be always over)..

  7. You are right, it does not work in IE! No, I have got no idea about how to do it in IE. I did not even know before writing this blog it could be done at all.

  8. Any known methods for creating this to be viewed in IE? Adding the BGimage as a style to the option tag does not work in IE and I was hoping someone knew a way around this.
    Thanks.liz

  9. Just a quick thanks to say how useful this info is. Just rebuilding my entire site and this little feature will come in very handy. BTW, is there anyway of getting the image to appear in the actual select box, eg: if you look at your example, where it says Bug at the top.

  10. I implement on my content manager the mechanism to see icons on some selects.

    It works ok in firefox but not work with IE.

    How I can solvent this problem???

    Josep.

  11. An alternate method follows:

    option:before {
    content: url(/images/dept.png);
    }

    This only works in Mozilla Firefox but I think it would be considered the “correct” (CSS hack free) method as far as HTML and CSS goes. Internet Explorer won’t support the content style until IE7. Even so, you can see how much more concise the code is.

    On the other hand, the form at the bottom of this page is broken.

    -Robert

  12. The CSS for the class “imagebacked” in JIRA is this:

    option.imagebacked {
    padding: 2px 0 2px 20px;
    background-repeat: no-repeat;
    background-position: 1px 2px;
    vertical-align: middle;
    }

  13. it would be great if you provide me the css, so i can use it for my project on the uni
    thx