Hello, I am looking to customize the appearance of a dropdown menu in HTML, specifically focusing on the option tags. While Firefox displays the desired style, Internet Explorer and Google Chrome are not rendering it correctly.
Currently, the padding only works in Firefox. The background color is consistent across all browsers, but in IE, it is visible even when an option is selected.
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;
}