我正在尝试使用CSS设置选择选项列表的样式。我希望在列表的各个时间之间进行更多填充,因为看起来好像挤在一起了。我尝试将填充添加到option元素,但这似乎不起作用。有任何想法吗?
这是我的代码
的HTML
<select name="secondSelect[]" id='second' multiple='multiple' size='8' >
<option value="1" style="padding: 10px;">Option a 1</option>
<option value="2" SELECTED >Option b 2(sel)</option>
<option value="3">Option c 3</option>
<option value="4" SELECTED >Option d 4 (sel)</option>
<option value="5">Option e 5</option>
<option value="6">Option f 6</option>
<option value="7">Option g 7</option>
<option value="8">Option h 8</option>
<option value="9">Option i 9</option>
<option value="10" SELECTED >Option l 10 (sel)</option>
</select>
的CSS
.ms2side__div select {
width: 220px;
float: left;
border: 1px solid #BFBFBF;
background: white;
font-size: 12px;
color: #9D9D9D;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
line-height: 25px;
}
http://jsfiddle.net/noscirre/GUdhc/
最佳答案
如果我是正确的话,Firefox是唯一支持option元素的padding,height,margin或任何其他形式的大小更改的浏览器。 (至少Chrome浏览器不允许更改大小,并且您不能忽略Chrome用户),因此上述解决方案主要适用于Firefox和其他一些浏览器。
因此,您可以选择自己滚动或使用可修改性更高的javascript元素库(例如jquery-ui或twitter bootstrap)。
关于jquery - 使用CSS的样式选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40659716/