javascript - HTML Select 在搜索中出现问题

Question

我有一个 HTML 选择，其中包含如下所示的元素。

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

现在，如果我在 SELECT 中单击并键入 21，它将选择元素 210，这是第一个以 21 开头的元素。一切顺利。

后来我想按客户的要求在item的左边加一个padding。但很快我意识到 SELECT 中的填充在 IE 中不起作用(至少在我测试过的 IE6 和 IE7 上)

所以我添加了  

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

现在我可以模仿填充了。

但是我丢失了搜索选项。当我在 IE 中输入 21 时，它不会选择 210。它在 chrome 中运行良好。请分享您的想法。

查找示例 here

Answer 1

如何将它包装在一个 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