Question

如何在多选

中增加两个选项之间的行高

HTML

<div>
    <select class="dk_multioptions_inner" tabindex="5" id="multiple" style="width: auto; visibility: visible; position: relative; font-weight:bold;" multiple="multiple">
        <option style="width: 150px;" value="Diploma degree">Diploma degree</option>
        <option value="Technical degree">Technical degree</option>
        <option  value="bachelor degree">Bachelor degree</option>
        <option value="Masters degree">Masters degree</option>
        <option value="Masters degree in technology">Masters degree in technology</option>
    </select>
</div>

CSS

.dk_multioptions_inner
{
    margin-left:-1px;
    margin-top:2px;
    color: #000000;
    max-height: 250px;
    border:1px solid #c997ba;
    background-color: #eeeeed;
    background-image: -moz-linear-gradient(top, #f9f9f8, #dadad9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f8), to(#dadad9));
    background-image: -webkit-linear-gradient(top, #f9f9f8, #dadad9);
    background-image: -o-linear-gradient(top, #f9f9f8, #dadad9);
    background-image: linear-gradient(to bottom, #f9f9f8, #dadad9);
    border-radius: 4px;
    -webkit-border-top-right-radius:0px;border-top-right-radius:0px;-moz-border-radius-topright:0px;
    -webkit-border-top-left-radius:0px;border-top-left-radius:0px;-moz-border-radius-topleft:0px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

Fiddle link

如何增加线高？

Answer 1

这里的代码完全有效：

#multiple option{
   padding: 8px;
}

或

#multiple option{
   height: 30px;
}

那就是它。

Answer 2

$('.dk_multioptions_inner').find('option').css("height", "20px");

演示：

http://jsfiddle.net/qre1pLet/

Answer 3

您正在尝试使用不同样式的元素设置样式，从浏览器到浏览器。不仅如此，一些浏览器不允许您设置默认下拉选项的样式。

样式下拉的最佳选择是实现自定义选择下拉列表。您可以使用几个jQuery插件。 Unheap有一个很好的选项列表：http://www.unheap.com/section/inputs-forms/selectboxes/

如何在多选下拉列表中增加两个选项之间的行高

3 个答案: