CSS Browser Compatibility with Select Element

Question

I have a select form element with the following CSS:

  border:solid 0 #000; background: transparent url("../images/input_fld.png") no-repeat; height:42px; width:275px; padding-left:10px; padding-right:0px; font-family: monospace; 

This creates a selection window as follows:

Webkit

Mos

IE

How can i fix this?

I tried adding this for IE:

 <!--[if IE]> <style> form select {padding-bottom:10px;} </style> <![endif]--> 

And while this fixes the problem of alignment with the bottom edge of the text, this also leads to the problem of also pressing the down arrow by 10 pixels.

Answer 1

If you are not averse to using the jQuery plugin, you can try http://www.verot.net/jquery_select_skin.htm . You will have to style it a little, but it is quite simple.

There is no support for IE6 in the plugin, but I think it’s always for the better :) Also try adding the line height to your CSS equal to the height of the selection window, in this case 42px.

Hope this helps.