3

For the life of me I can't figure out how to style a select box that uses the size attribute. Almost all of the tutorials out there are for a single-item select box. Does anybody have any experience with select boxes that use the size attribute?

For reference, this is what I'm talking about:

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

I'm developing on Chrome/Safari/Firefox for Mac. I have tried the -moz-appearance: none; and -webkit-appeareance: none; properties for both the select box and the individual options. I have also tried setting a border on the select and the options.

I am able to style the select box in the sense that I can resize it, move it around, and change the font size, but I am completely unable to style the individual options.

edit 1 Here's an example of what I want to do:

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

If I have a regular select (without using the size attribute) I can style this however I'd like. WITH the size attribute, the options suddenly are not able to be modified in any way.

4

2 回答 2

1

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

如果这不适合你，谷歌搜索其他人，但是搜索“listbox”（例如“jQuery listbox”），你会找到像http://kalnitsky.org/projects/listbox.js/en/这样的替代品。

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

于 2013-08-20T19:46:18.080 回答
1

给选择元素一个类并在那里做你的CSS。

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

//css

.classname {width:0;
height:0;
background:# ;//etc }
于 2013-08-20T19:11:51.843 回答