Html 如何增加选择的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20656114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase height of a select?
提问by Jazmin
Without using any plugins, how can I increase the height of the <select>box in CSS?
在不使用任何插件的情况下，如何增加<select>CSS 中框的高度？
I tried line-heightbut it didn't work for me.
我试过了，line-height但对我不起作用。
回答by Vallier
I came across this other answer that actually works, if anyone chances across this question again.
如果有人再次遇到这个问题，我遇到了另一个实际有效的答案。
How to standardize the height of a select box between Chrome and Firefox?
如何标准化 Chrome 和 Firefox 之间选择框的高度？
Basically you change the appearance definition of the element, then you can add style to it.
基本上，您更改元素的外观定义，然后您可以为其添加样式。
.className {
-webkit-appearance: menulist-button;
height: 50px;
}
Worked for me, but it does change the border on the element. Just be sure to cross-browser check it after the change and ensure the border styling is still acceptable.
为我工作，但它确实改变了元素的边框。只要确保在更改后跨浏览器检查它并确保边框样式仍然可以接受。
回答by prajun karn
I hope this works for you
我希望这对你有用
just give a height to the option in your stylesheet so that you can easily calculate the height of select field with the number of option rows
只需为样式表中的选项指定一个高度，以便您可以使用选项行数轻松计算选择字段的高度
<style>
select>option{
height:20px;
}
</style>
and add this function in your script tag as you desire or just copy this
并根据需要将此功能添加到您的脚本标签中，或者只是复制它
<script>function myFunction() {
var x = document.getElementById("mySelect").length;
var y = 20 * x +10;
document.getElementById("mySelect").style.height = y+"px";}</script>
Body section
车身部分
<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>
回答by Florian Wendelborn
For me this did the trick:
对我来说，这做到了：
select {
font: inherit;
}
回答by Shalinee SIngh
Since the priority is given to the inline-styling, you can use this trick to increase the height of your select list. All you have to do is add inline-style in the select tag.
由于优先考虑内联样式，您可以使用此技巧来增加选择列表的高度。您所要做的就是在 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>
