css 如何增加选择的高度？

v2g6jxz6 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(137)

在不使用任何 * 插件 * 的情况下，如何增加CSS中<select>框的高度？
我试过line-height，但它不适合我。

css

来源：https://stackoverflow.com/questions/20656114/how-to-increase-height-of-a-select

4条答案

按热度按时间

lsmepo6l1#

我发现了另一个有效的答案，如果有人再次遇到这个问题。
How to standardize the height of a select box between Chrome and Firefox?
基本上，您可以更改元素的外观定义，然后可以为其添加样式。

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

对我有效，但它确实改变了元素上的边框。只是一定要跨浏览器检查后的变化，并确保边界样式仍然是可以接受的。

赞(0）回复(0）举报 2023-06-25

zqdjd7g92#

只需要在样式表中给选项一个高度，这样你就可以很容易地用选项行数来计算选择字段的高度

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

赞(0）回复(0）举报 2023-06-25

xfb7svmp3#

对我来说，这是个诀窍：

select {
    font: inherit;
}

赞(0）回复(0）举报 2023-06-25

olqngx594#

因为优先级是内联样式，所以可以使用这个技巧来增加选择列表的高度。您所要做的就是在选择标记中添加内联样式。

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

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何增加选择的高度？

4条答案

相关问题

热门标签

最新问答