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

By: anonymous hero

anonymous hero — Tue, 23 Aug 2011 05:49:29 +0000

How did you do it ? Gimme the code

By: anonymous coward

anonymous coward — Thu, 20 Jan 2011 18:23:19 +0000

Does not work in Chrome. ONLY FIREFOX.

By: Wojciech Beling

Wojciech Beling — Thu, 10 Jan 2008 23:46:30 +0000

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

By: Upanisad

Upanisad — Thu, 14 Jun 2007 10:48:04 +0000

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.

By: Crash Daemonicus

Crash Daemonicus — Thu, 17 May 2007 02:18:27 +0000

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…

By: NaTaN

NaTaN — Fri, 20 Oct 2006 20:35:33 +0000

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

By: Fab

Fab — Sat, 19 Aug 2006 17:42:34 +0000

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

By: Eugene Bond

Eugene Bond — Tue, 20 Jun 2006 18:57:04 +0000

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

By: Lucas Jellema

Lucas Jellema — Tue, 16 May 2006 07:06:34 +0000

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.

By: Liz

Liz — Mon, 15 May 2006 22:18:39 +0000

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