« Introduction to EJB 3.0 Persistence – article in Dutch

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:

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.

This entry was posted by Lucas Jellema on January 13, 2006 at 9:11 am, and is filed under General, J(2)EE/Java, Java, JEE, OAS and WebLogic Server, Oracle, Web. Follow any responses to this post through RSS 2.0.Both comments and pings are currently closed.

Comments (18)
Related Posts

Comments are closed
#1 written by anonymous hero 1 year ago

How did you do it ? Gimme the code
#2 written by anonymous coward 2 years ago

Does not work in Chrome. ONLY FIREFOX.
#3 written by Wojciech Beling 5 years ago

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
#4 written by Upanisad 5 years ago

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.
#5 written by Crash Daemonicus 6 years ago

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…
#6 written by NaTaN 6 years ago

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
#7 written by Fab 6 years ago

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
#8 written by Eugene Bond 6 years ago

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)..
#9 written by Lucas Jellema 7 years ago

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.
#10 written by Liz 7 years ago

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
#11 written by maffo 7 years ago

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.
#12 written by Josep Sanz 7 years ago

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.
#13 written by dana 7 years ago

I wasn’t able to get this to work in IE, via class on the option tag, or in CSS.
#14 written by Robert Lee 7 years ago

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
#15 written by Tim Blair 7 years ago

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;
}
#16 written by jack 7 years ago

Me too, I need the css to make this work.
#17 written by Paul 7 years ago

it would be great if you provide me the css, so i can use it for my project on the uni
thx
#18 written by chirag 7 years ago

This is good
Plz Provide Me this CSS so i can use in my site.

Thanx.
Comment Feed for this Post