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;}

问题是文本在Firefox中没有垂直对齐，即使它在Chrome中也是如此。 请参阅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外观，您可以在任何浏览器中使其看起来像您想要的任何内容。

编辑：确保你从我的网站下载arrows.png然后在本地使用它，我只会在那里使用一段时间。

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

2 个答案: