<select>具有高度的HTML元素

Question

有没有人知道一种方式来设置HTML选择元素的样式,以便它具有一定的高度并且在浏览器中看起来很好？我曾尝试在CSS中设置高度,但框内的文本在Firefox中垂直偏离中心.

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

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

Answer 1

我已经使用了一些CSS黑客并单独定位Chrome/Safari/Firefox/IE,因为每个浏览器渲染选择有点不同.我已经在IE以外的所有浏览器上进行了测试.

对于Safari /铬,设置height和line-height你想为你<select />.

对于Firefox,我们将杀死 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;
    }     
}