单选 HTML 列表框高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6512358/
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
Single-Select HTML List Box Height
提问by Craig Walker
I have an HTML <select>that I want to appear as a "list box" (a box that displays multiple items simultaneously, as opposed to a drop-down box). However, I only want to allow a single item to be selected. I also want to set the height of the box (via CSS) to be 100% of it's container size.
我有一个 HTML <select>，我想将其显示为“列表框”（一个同时显示多个项目的框，而不是下拉框）。但是，我只想允许选择单个项目。我还想将框的高度（通过 CSS）设置为其容器大小的 100%。
These three things seem to be mutually exclusive. Setting the multipleattribute of the <select>element will make the control render as a list box instead of a dropdown. However, I don't want multiple elements to be selected, so this doesn't work. The only other way I know to make a <select>into a list box is to set the sizeattribute to a value > 1. This will also set the height of the box, and it appears that I can't change the height via CSS when the HTML attribute is set.
这三件事似乎是相互排斥的。设置元素的multiple属性<select>将使控件呈现为列表框而不是下拉列表。但是，我不希望选择多个元素，因此这不起作用。我知道将 a<select>变成列表框的唯一另一种方法是将size属性设置为> 1 的值。这也将设置框的高度，而且当 HTML 显示时，我似乎无法通过 CSS 更改高度属性设置。
回答by Stephen P
You can make the <select>100% of the height of the <form>that contains it.
See this fiddlefor an example of a div enclosing a form, with a select filling the height of the form.
您可以使包含它<select>的高度的100% <form>。有关包含表单的 div 示例，请参阅此小提琴，其中选择填充表单的高度。
This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.
这从一个简单的结构开始，足以将表单包含在某些东西中，以便您可以看到相对布局。
<div>
<form>
<select id="thelist" size="4">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
</div>
I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.
我给 div 一个高度，一个背景，这样你就可以看到它，并填充它的内容不会自然地覆盖它。使表单具有您想要的任何高度，包括 100% 的 div。我做了 90%，所以你仍然可以看到封闭的 div。请注意，除了填充之外，表单的宽度填充了 div 宽度。
You can then just set the height of the select list to anything you want inside the form. Here's my CSS
然后，您可以将选择列表的高度设置为您想要的任何表单内的高度。这是我的 CSS
div {
background-color: #fff0f0;
height: 40em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 90%;
}
#thelist {
height: 100%;
}
Put together as a snippet, and making it smaller to fit better here...
放在一起作为一个片段，并使它更小以更好地适应这里......
div {
background-color: #fff0f0;
height: 20em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 40%;
}
#thelist {
height: 100%;
}<div>
<form>
<select id="thelist" size="4">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
</div>回答by Jazmin
Just give a border to the select box and set a height. It worked for me.
只需给选择框一个边框并设置一个高度。它对我有用。
select.custom-select-box {
border: 1px solid #999; height: 28px;}
select.custom-select-box {
border: 1px solid #999; height: 28px;}
