<select> 具有高度的 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20477823/
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
<select> HTML element with height
提问by stackoverflowrocks
Does anyone know of a way to style an HTML select element so that it has a certain height and looks good across browsers? I've tried simply setting height in CSS but the text inside the box is vertically off-center in Firefox.
有谁知道一种设置 HTML 选择元素样式的方法，使其具有一定的高度并且在浏览器中看起来不错？我试过简单地在 CSS 中设置高度，但框内的文本在 Firefox 中垂直偏离中心。
<select style="height:1.8em;">
This is not a duplicate question. The other question asks about the height of the drop-down box that appears when you click on a select element. My question is about the height of the unclicked select element.
这不是一个重复的问题。另一个问题询问单击选择元素时出现的下拉框的高度。我的问题是关于未点击的选择元素的高度。
回答by Mike Barwick
I've used a few CSS hacks and targeted Chrome/Safari/Firefox/IE individually, as each browser renders selects a bit differently. I've tested on all browsers except IE.
我使用了一些 CSS hacks 并分别针对 Chrome/Safari/Firefox/IE，因为每个浏览器呈现的选择有点不同。我已经在除 IE 之外的所有浏览器上进行了测试。
For Safari/Chrome, set the heightand line-heightyou want for your <select />.
对于Safari /铬，设置height和line-height你想为你<select />。
For Firefox, we're going to killFirefox's default padding and border, then set our own. Set padding to whatever you like.
对于 Firefox，我们将取消Firefox 的默认填充和边框，然后设置我们自己的。将填充设置为您喜欢的任何内容。
For IE 8+, just like Chrome, we've set the heightand line-heightproperties. These two media queriescan be combined. But I kept it separate for demo purposes. So you can see what I'm doing.
对于 IE 8+，就像 Chrome 一样，我们设置了height和line-height属性。这两个media queries可以结合。但为了演示目的，我把它分开了。所以你可以看到我在做什么。
Please note, for the height/line-heightproperty to work in Chrome/Safari OSX, you must set the backgroundto a custom value. I changed the color in my example.
请注意，要使该height/line-height属性在 Chrome/Safari OSX 中工作，您必须将 设置background为自定义值。我在示例中更改了颜色。
Here's a jsFiddle of the below: http://jsfiddle.net/URgCB/4/
这是以下的 jsFiddle：http: //jsfiddle.net/URgCB/4/
For the non-hack route, why not use a custom select plug-in via jQuery? Check out this:http://codepen.io/wallaceerick/pen/ctsCz
对于非 hack 路线，为什么不通过 jQuery 使用自定义选择插件？看看这个：http : //codepen.io/wallaceerick/pen/ctsCz
HTML:
HTML：
<select>
<option>Here's one option</option>
<option>here's another option</option>
</select>
CSS:
CSS：
@media screen and (-webkit-min-device-pixel-ratio:0) { /*safari and chrome*/
select {
height:30px;
line-height:30px;
background:#f4f4f4;
}
}
select::-moz-focus-inner { /*Remove button padding in FF*/
border: 0;
padding: 0;
}
@-moz-document url-prefix() { /* targets Firefox only */
select {
padding: 15px 0!important;
}
}
@media screenvertical-align: middle;
{ /* IE Hacks: targets IE 8, 9 and 10 */
select {
height:30px;
line-height:30px;
}
}
回答by Pablo V.
You can also "center" the text with:
您还可以使用以下命令“居中”文本：
##代码##