HTML中的样式下拉元素

Question

Hi I want to change the style of the dropdown, nearer the option tags, in HTML. In Firefox it is working, but not properly in IE and google chrome.

The padding is only working in firefox. The background color is working on all browsers, but in IE you can see it, even on the selected value.

Demo with JSFiddle

Html:

<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
    <option selected="selected">en_CA</option>
    <option>en_US</option>
    <option>fr_FR</option>
    <option>fr_CA</option>
    <option>ja_JP</option>
</select><br />

CSS:

label{
    margin: 5px 0px 10px 0px;
    padding: 5px;
    height: 22px;
    display: inline-block;
    width: 100px;
}

label em{
    color: red;
    font-family: Arial;
    font-weight: bold;
}

select{
    color: #333;
    margin: 5px 0px 10px -5px;
    padding: 5px;
    height: 32px;
    width: 262px;
    border: #999 1px solid;
}

select option {
    padding: 5px 8px;
    background: #ddd;
}

Answer 1

Webkit browsers (Safari, Chrome etc) don't allow padding on select elements. You can however mimic padding by manipulating the height for top and bottom padding and text-indent for left-padding.

Update: The same goes for background-color on option elements. Webkit doesn't allow that and I don't believe there's a workaround other than doing your own Javascript implementation of a drop-down using for example an unordered list and some styling.

Answer 2

I don't think you could just style the option tags. I think I read it from somewhere that it is based on OS or something...