Question

<select id="organiser" name="organiser" onclick="dropDownOrganiser(this)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="ca" >California</option>
    <option value="co" >Colorado</option>
    <option value="cn" >Connecticut </option>\
</select>

#organiser option{
    height:70px;   
    padding:25px 0;    
}
#organiser{
    height:50px;       
}

我试图在select中更改选项的高度，但它仍然是相同的。我甚至尝试填充但它没有工作。我需要帮助这个。否则建议我一些网站的最佳下拉列表设计？

Answer 1

无法设置适用于大多数当前流行浏览器的下拉选项。最好的方法是使用html，css和javascript创建自定义下拉列表。

您可以在那里找到教程和演示：http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

我发现本教程很容易理解，您可以通过阅读本文来制作自己的下拉列表。

Answer 2

您无法为选择框的选项添加CSS。但是可以使用自定义的jquery插件，或者只使用自定义的html和css

顺便说一句，你可以让文字更大，这样选择框也会更大。

Answer 3

最后，我找到了下拉列表中最好的插件。由silvio mortiro提供的Bootstrap用户友好，并且键盘导航都很好。查看http://silviomoreto.github.io/bootstrap-select/

无法在CSS中更改下拉列表的选项高度

3 个答案: