HTML Select padded with   having issue in search

Question

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>

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   

<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>

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.

Find the sample here

Answer 1

How about wrapping it in a div:

HTML:

<div class="listwrapper">
    <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>
</div>​

CSS:

.listwrapper
{
    padding: 0px 0px 0px 15px;
    border: solid 1px silver;
    width: 50px;
}
.listwrapper select,
.listwrapper select:active
{
    border: none 0px white;
    width: 50px;
}
​

My Fiddle

Answer 2

Try to use align in CSS

​select { width:auto; }
option { text-align:center; }

This actually work. Here is the proof in jsfiddle

Answer 3

<style> is an inline element hence adding a padding will not work in IE6 however with display:block; this can be overcome

use

<style>
    #mylist
{
    padding-left:10px;
    display:block;
}
</style>​ 

Hope this helps helps. Fiddle here