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:
<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.
How did you do it ? Gimme the code
Does not work in Chrome. ONLY FIREFOX.
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
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.
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…
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
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
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)..
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.
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
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.
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.
I wasn’t able to get this to work in IE, via class on the option tag, or in CSS.
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
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;
}
Me too, I need the css to make this work.
it would be great if you provide me the css, so i can use it for my project on the uni
thx
This is good
Plz Provide Me this CSS so i can use in my site.
Thanx.