javascript - 使用大小属性设置选择框的样式？

Question

我这辈子都不知道如何设置使用 size 属性的选择框的样式。几乎所有的教程都是针对单项选择框的。有人对使用 size 属性的选择框有任何经验吗？

作为引用，这就是我所说的:

<select class="awesome_select" size="5">
<option>1</option>
<option>2</option>
</select>

我正在 Mac 版 Chrome/Safari/Firefox 上进行开发。我试过 -moz-appearance: none;和-webkit-外观:无；选择框和各个选项的属性。我还尝试在选择和选项上设置边框。

我可以设置选择框的样式，因为我可以调整它的大小、移动它和更改字体大小，但我完全无法设置单个选项的样式。

edit 1 下面是我想要执行的操作的示例:

select.awesome_select {
border: 1px solid #ACADAC;
padding: 0;
outline: none;
-webkit-appeareance: none;
}
select.awesome_select option {
padding: 5px;
background-color: #FF0000;
-webkit-appearance: none;
}

如果我有一个常规选择(不使用大小属性)，我可以根据自己的喜好设置样式。有了 size 属性，选项突然无法以任何方式修改。

Answer 1

既然您愿意使用 jQuery 并且原始的 SELECT 不适合您的需要，我建议使用 Selectable from jQueryUI

如果这不适合你，谷歌搜索其他人，但搜索“列表框”(例如“jQuery 列表框”)，你会找到类似 http://kalnitsky.org/projects/listbox.js/en/ 的替代方案。

它们中的大多数不会将您现有的 SELECT 元素转换为新元素，但有些会。