HTML选择填充  在搜索中有问题

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开头.一切都很好.

后来我想根据客户的要求在项目的左边添加一个填充.但很快我意识到填充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.它适用于铬.请分享你的想法.

在这里找到样本

Answer 1

将其包装在 div 中怎么样：

\n\n

HTML：

\n\n

<div class="listwrapper">\n    <SELECT id="mylist" size=5 >\n        <OPTION Value="100">100</OPTION>\n        <OPTION Value="200">200</OPTION>\n        <OPTION Value="210">210</OPTION>\n        <OPTION Value="211">211</OPTION>\n    </SELECT>\n</div>\xe2\x80\x8b\n

\n\n

CSS：

\n\n

.listwrapper\n{\n    padding: 0px 0px 0px 15px;\n    border: solid 1px silver;\n    width: 50px;\n}\n.listwrapper select,\n.listwrapper select:active\n{\n    border: none 0px white;\n    width: 50px;\n}\n\xe2\x80\x8b\n

\n\n

我的小提琴

\n