html - IE only padded drop down issue -

I have a selection list with some padding on the left:

  & lt; Select & gt; & Lt; Options & gt; Opt A & lt; / Options & gt; & Lt; Options & gt; Opt B & lt; / Options & gt; & Lt; / Select & gt; Select   
 css  
  {padding-left: 20px; }a????   
 In addition to IE (in IE8, Win XP, IE8 standard I am using IE8, Win XP, IE8), I can choose easily by clicking on the padding on the left side of the dropdown. However, in IE use two clicks to open the drop down using this padding.  
 How can I open the drop down menu in IE by clicking on this padded area with one click? I am ready to use JS if I have to do it completely but want to save it.  
 For an example of this issue, see it in the IE padded area on the left side to see the functionality  
  Edit:   
 I should clarify that I already have a style dropdown which is a combination of CSS and regular HTML, there is an arrow image on the left in the drop down, due to which the padding on the text is important. I do not want to change any of them. When I click on the padded area, I just want to do it correctly in IE  
  Carcouge   
 As an alternative solution, I have removed the padding from CSS and now I  nbsp; to emulate padding. I'm padding the actual text in options with too much a hack because now prevents any user from typing in the selection box to jump on specific values ​​but since I need to support IE Since then, it may still be that I go for now.  
  & lt; Select & gt; & Lt; Options & gt; & Amp; Nbsp; & Amp; Nbsp; & Amp; Opt A & lt; / Options & gt; & Lt; Options & gt; & Amp; Nbsp; & Amp; Nbsp; & Amp; Nbsp; Opt B & lt; / Options & gt; & Lt; / Select & gt;    
 
 
 This is a common issue, some properties   < Li>   
          > (This is not a jquery)   
 Hope it helps!