在HTML选择元素跨浏览器中垂直对齐文本

Question

我有一个带有以下CSS的HTML select元素：

.MySelect{
    padding: 0px 0px 0px 4px;
    background: white;
    width:180px;
    border: 2px solid red;
    box-shadow: 2px 2px 10px lightgray;
    border-radius: 5px;
    height: 26px;
    line-height: 26px;
    font-family: "Trebuchet MS";
    font-size: 13px;
    margin:20px 20px;}

问题在于，即使认为在Chrome中，文本也无法在Firefox中垂直对齐。 有关演示，请参见jsfiddle 。

如何在所有浏览器中使文本垂直对齐？

编辑：我问这个问题之前尝试修改填充，这是行不通的。

谢谢。

Answer 1

添加的填充有助于FFox和chrome，似乎并不介意。

.MySelect{
        padding: 2px 0px 2px 4px;
        background: white;
        width:180px;
        border: 2px solid red;
        box-shadow: 2px 2px 10px lightgray;
        border-radius: 5px;
        font-family: "Trebuchet MS";
        font-size: 13px;
        margin:20px 20px;
}

Answer 2

如果您希望完全控制，建议您将输入内容设置为“ -webkit-appearance：none;”。

这是重新创建外观的CSS：

.MySelect {
width: 180px;
height: 26px;
padding:0px 0px 0px 4px;
border: 2px solid red;
box-shadow: 2px 2px 10px lightgray;
border-radius: 5px;
font-family: "Trebuchet MS";
font-size: 13px;
-webkit-appearance: none;
background: #E7E7E7;
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -moz-linear-gradient(top, #E7E7E7 0%, #FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E7E7E7), color-stop(100%,#FEFEFE));
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -webkit-linear-gradient(top, #E7E7E7 0%,#FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -o-linear-gradient(top, #E7E7E7 0%,#FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, -ms-linear-gradient(top, #E7E7E7 0%,#FEFEFE 100%);
background: url("http://www.412webdesigns.com/upload/arrows.png") no-repeat right, linear-gradient(to bottom, #E7E7E7 0%,#FEFEFE 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#fefefe',GradientType=0 );
}

然后，如果那一个像素在FireFox中困扰您，请使用以下方法：

@-moz-document url-prefix() {
.MySelect {
    padding:1px 0px 0px 4px;
}
}

借助webkit外观，您可以使其在任何浏览器中看起来都一样。

编辑：请确保您从我的网站上下载了arrow.png，然后在本地使用它，我只会在那里待一会儿。