I have a select list with some padding to the left:

<select>
    <option>Opt A</option>
    <option>Opt B</option>
</select>

CSS

select
{
padding-left:20px;
}​

In every browser besides IE (I'm using IE8, Win XP, IE8 Standards), I can easily open the select by clicking on the padding to the left of the dropdown. However, in IE it takes two clicks to open up the drop down using this padding.

How can I open up the drop down menu in IE by clicking on this padded area using a single click? I'm willing to use js if I absolutely have to but would like to avoid it.

See this jsfiddle for an example of the issue. Click the padded area on the left to see the functionality in IE.

EDIT:

I should clarify. I already have a styled dropdown which is a combination of css and regular HTML. The drop down has an arrow image on the left which is why the padding on the text is important. I don't want to change any of this. I only want it to function correctly in IE when the padded area is clicked.

WORKAROUND

As a workaround, I have removed the padding from the CSS and now I am padding the actual text in the options with nbsp; to simulate padding. Very much a hack as it now stops any users from typing into the select box to jump to specific values. But since I need to support IE, this may have to be the way that I go for now.

 <select>
   <option>&nbsp;&nbsp;&nbsp;Opt A</option>
   <option>&nbsp;&nbsp;&nbsp;Opt B</option>
</select>