Question

不使用任何插件，如何增加CSS中<select>框的高度？我试过line-height，但它对我没用。

由于

Answer 1

如果有人再次遇到这个问题，我偶然发现了另一个确实有效的答案。

How to standardize the height of a select box between Chrome and Firefox?

基本上你改变元素的外观定义，然后你可以添加样式。

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

为我工作，但确实改变了元素的边框。请务必在更改后进行跨浏览器检查并确保边框样式仍然可以接受。

Answer 2

我希望这对你有用

只为样式表中的选项指定一个高度，以便您可以使用选项行数轻松计算选择字段的高度

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

身体部分

{{1}}

Answer 3

对我来说，这就是诀窍：

{{1}}

Answer 4

由于优先考虑内联样式，因此您可以使用此技巧来增加选择列表的高度。您所要做的就是在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>

如何在CSS中选择框的样式（增加高度）？

4 个答案: