Adding space between options of select tag in IE browser

问题

I want to add a space in between 2 options of a select element in IE browser. My code works in Firefox and Chrome, using CSS I wrote for the select element. However, the styles are not applied in IE. This is the CSS for the select element is like:

.branchDropdown { border: 1px solid #999999; width: 155px; } 

and for the option element:

.branchDropdown option { cursor: pointer; margin-top: 10px; }

回答1:

You cannot style <option> elements in Internet Explorer with most properties. They inherit the style from the Windows operating system, except for the background and font colours. Here's a quote from the MSDN page for <option>:

Except for background-color and color, style settings applied through the style object for the option element are ignored. In addition, style settings applied directly to individual options override those applied to the containing select element as a whole.

http://msdn.microsoft.com/en-us/library/ie/ms535877(v=vs.85).aspx

To create a consistent appearance, your only other option is to use JavaScript to render a custom element that replaces the default select element on your page.

回答2:

option elements in select elements cannot be accessed directly by CSS, you need a javascript replacement to customize the select element in that way. See this interesting blog entry. A alternative js replacement is select2.

来源：https://stackoverflow.com/questions/15613081/adding-space-between-options-of-select-tag-in-ie-browser