Styling a select box for IE8?

HTML & CSS
1

I am wondering if there is a reliable way to style a select box that will work with IE7, 8 and 9.

I currently have the following style applied to text boxes on my form and i would like the same effect on my select boxes.


height:28px;
border:1px solid #999;
line-height:28px;
background-image:url(../PortalTemplate/images/textBox_bg.jpg);
background-repeat:repeat-x;

when i try to apply the same code to select or option it seems to do nothing in IE - although it works well in firefox.

any ideas?

2

I am wondering if there is a reliable way to style a select box…

Nope, give up :slight_smile:
Select elements are the hardest element to style consistently so people have stopped trying.

I’ve started using the chosen select element replacement by harvest which you may prefer.
http://harvesthq.github.com/chosen/

3

interesting you should mention the chosen plugin from harvest. that is actually why I am asking about this. I am currently using that plugin which is awesome but I have multiple select boxes on my form and am running into z-index issues in all versions of IE (all other browsers are fine).

I actually posted on the developers page and he replied and said that it shouldn’t do that in IE7+ but it clearly does. :slight_smile: so my solution was to remove the chosen styling from all but a few selects on the page (which don’t overlap), and then manually style the remaining selects to visually match so that they dont look to out of place.

Have you had any experience with z-index issues in IE using the chosen plugin? I would love to just use chosen on all the selects on the page.

4

You can style very little of the select element in IE7 so you are pretty much stuck with the default settings. Also ie7 has a z-index bug and if the parent is positioned then the parent dictates the stacking context as it gets a z-index value of zero when it should have auto. This lead to a lot of stacking problems within pages as you have to make sure its the parent of the select that controls the stacking levels with other elements on the page.

If you have overlapping issues then you will have to treat them on a cases by case basis to sort them out.