logo标签列表

如何增加下拉列表的高度？

htmlcss
17

在CSS中，不使用任何插件，如何增加<select>框的高度？

我尝试了line-height，但它对我没有起作用。

只使用高度？或者如果您想使它们更高，可以向<option>元素添加填充。 - casraf
4个回答
31

我发现了另一个答案，如果有人再次遇到这个问题，那么它实际上是有效的。

如何在Chrome和Firefox之间标准化选择框的高度？

基本上，您需要更改该元素的外观定义，然后可以向其添加样式。

.className {
   -webkit-appearance: menulist-button;
   height: 50px;
}

对我来说起作用了，但它确实改变了元素的边框。在更改后一定要跨浏览器检查它，并确保边框样式仍然可接受。

4
只需在样式表中为选项设置一个高度，这样您就可以轻松计算选择字段的高度与选项行数。
<style>
      select>option{ 
                   height:20px;
                 }
</style>

并根据您的需求在脚本标签中添加此功能，或者只需复制此内容

<script>function myFunction() {
var x = document.getElementById("mySelect").length;
var y = 20 * x +10;
document.getElementById("mySelect").style.height = y+"px";}</script>

正文部分
<body onload="myFunction()"><select id="mySelect" multiple="multiple"><option>Apple</option>option>Pear</option><option>Banana</option><option>Orange</option><option>Banana</option></select></body>
2
对我来说，这个方法很有效：

select {
    font: inherit;
}
1

由于在样式优先级方面，内联样式的优先级更高，因此您可以使用此技巧来增加选择列表的高度。您只需要在select标签中添加内联样式即可。

<!-----------If you are using Bootstrap ---------->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

<div class="container">
  <form>
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" style=" height:50px;" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      </div>
    </form>
  </div>
  </body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接