IE select drop down border and size with jquery

IE uses OS native libraries to render the HTML SELECT element. This is why some styles will not be respected in Internet Explorer.

Thanks to a jquery plugin you can go around this issue. After downloading and installing the plugin:

1. Include the specific CSS just for IE. Using the spring:url tag below so if you do not use Spring you can just include the plain url instead.
   

2. Here is the code for ie_only.css. First CSS selector below is just for the border. The rest is the default for 13px as explained in the author URL. I am pasting the whole file so get the idea of what to customize if needed.
   

   .ie-hacked-select {
       border: 1px inset #000000;
   }
   
   /* Basic overlay CSS */
   .select-overlay { background:#fff }
   .ie-select-width-overlay span
   {
       display:block;
       float:left;
       clear:both;
       background:transparent url(../images/bg-ie-select-width-13px.png) no-repeat 0 0
   }
   
   
   /** Overlay CSS for Internet Explorer 6 and 7 */
   .ie6 .ie-select-width-overlay span,
   .ie7 .ie-select-width-overlay span
   {
       width:17px;
       height:20px;
       background-position:0 -18px 
   }
   .ie6 .ie-select-width-overlay-hover span,
   .ie7 .ie-select-width-overlay-hover span { background-position:-17px -18px }
   .ie6 .ie-select-width-overlay-mouseover span,
   .ie7 .ie-select-width-overlay-mouseover span { background-position:-18px -18px }
   
   
   /* Overlay CSS for Internet Explorer 8 */
   .ie8 .ie-select-width-overlay span
   {
       width:17px;
       height:18px;
       background-position:0 0
   }
   .ie8 .ie-select-width-overlay-hover span { background-position:-17px 0 }
   .ie8 .ie-select-width-overlay-mouseover span { background-position:-18px 0 }
   

3. Include the javascript
   

   <script src="<spring:url value="/js/jquery.ie-select-style.pack.js" htmlEscape="true" />" type="text/javascript"></script>
   

4. I use the below in one big form where all select boxes need to be corrected. In IE8 I have noticed it fails in some pages so it is always better to set the class explicitely per select box.
   

   $(document).ready(function() {
       //You better avoid this and set the class in the select element
       $('select').addClass('ie-hacked-select');
   
       //This is the real statement needed. It applies the style to certain select boxes
       $('.ie-hacked-select').ieSelectStyle({});
   });