1

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

.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进行演示。

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

编辑：我在问这个问题之前尝试修改填充，但这不起作用。

谢谢。

4

2 回答 2

3

添加的填充有助于 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;
}
于 2012-12-14T18:47:21.807 回答
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，然后在本地使用它，我只会在那里使用一段时间。

于 2012-12-14T21:34:36.277 回答