HTML Select padded with &nbsp; having issue in search
===

I have an HTML select which has items like the below.

    <SELECT id="mylist" size=5 >
       <OPTION Value="100">100</OPTION>
       <OPTION Value="200">200</OPTION>
       <OPTION Value="210">210</OPTION>
       <OPTION Value="211">211</OPTION>
    </SELECT>

![enter image description here][1]

Now if I click inside the `SELECT` and type 21 then it will select the item `210` which is the first item starts with 21. All good.

Later I wanted to add a padding to the left of the item as requested by the client. But soon I realized that padding in `SELECT` will not work in IE (at least on IE6 and IE7 which I tested)

So I added `&nbsp;&nbsp;`

    <SELECT id="mylist" size=5 >
       <OPTION Value="100">&nbsp;&nbsp;100</OPTION>
       <OPTION Value="200">&nbsp;&nbsp;200</OPTION>
       <OPTION Value="210">&nbsp;&nbsp;210</OPTION>
       <OPTION Value="211">&nbsp;&nbsp;211</OPTION>
    </SELECT>

![enter image description here][2]

Now I can mimic padding. 

But I lost the search option. It will not select 210 when I type 21 in IE. It works well in chrome. Please share your thoughts.


  [1]: http://i.stack.imgur.com/UnFE2.png
  [2]: http://i.stack.imgur.com/2cfhM.png