Question

对于我的生活，我无法弄清楚如何设置使用size属性的选择框的样式。几乎所有的教程都是针对单项选择框的。有没有人对使用size属性的选择框有经验？

作为参考，这就是我所说的：

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

我正在开发适用于Mac的Chrome / Safari / Firefox。我试过-moz-appearance：none;和-webkit-appeareance：none;选择框和各个选项的属性。我也尝试在选择和选项上设置边框。

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

编辑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属性），我可以设置它，但我喜欢。使用size属性，突然无法以任何方式修改选项。

Answer 1

给select元素一个类，并在那里做你的css。

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

// CSS

.classname {width:0;
height:0;
background:# ;//etc }

Answer 2

由于你打开使用jQuery，因为原来的SELECT不适合你的需要，我建议使用Selectable from jQueryUI

如果这不适合您，Google可以搜索其他人，但搜索“listbox”（例如“jQuery listbox”），您会找到http://kalnitsky.org/projects/listbox.js/en/等替代品。

他们中的大多数都不会将现有的SELECT元素转换为新的元素，但有一些可以。

使用size属性设置选择框的样式？

2 个答案: