Question

有没有人知道如何设置HTML select元素的样式，使其具有一定的高度并且在浏览器中看起来很好？我曾尝试在CSS中设置高度，但框内的文字在Firefox中垂直偏离中心。

<select style="height:1.8em;">

这不是一个重复的问题。另一个问题询问单击选择元素时出现的下拉框的高度。我的问题是未被选中的选择元素的高度。

Answer 1

我已经使用了一些CSS黑客并单独定位Chrome / Safari / Firefox / IE，因为每个浏览器呈现的选择方式都有所不同。我已经在IE以外的所有浏览器上进行了测试。

对于Safari / Chrome ，请为height设置所需的line-height和<select />。

对于Firefox ，我们将 kill Firefox的默认填充和边框，然后设置我们自己的。将填充设置为您喜欢的任何内容。

对于IE 8 + ，就像Chrome一样，我们设置了height和line-height属性。这两个media queries可以合并。但为了演示目的，我将它分开。所以你可以看到我在做什么。

请注意，要使height/line-height媒体资源在Chrome / Safari OSX中运行，您必须将background设置为自定义值。我改变了我的例子中的颜色。

以下是jsFiddle：http://jsfiddle.net/URgCB/4/

对于非黑客路由，为什么不通过jQuery使用自定义选择插件？看看这个： http://codepen.io/wallaceerick/pen/ctsCz

<强> HTML：

<select>
    <option>Here's one option</option>
    <option>here's another option</option>
</select>

<强> 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 screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */        
    select {
        height:30px;
        line-height:30px;
    }     
}

Answer 2

您还可以使用以下内容“居中”文字：

vertical-align: middle;

<select>高度为</select>的HTML元素

2 个答案: