1

次のCSSを持つHTMLselect要素があります。

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

そして、その1つのピクセルがFireFoxで気になる場合は、次のようなものを使用します。

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

Webkitの外観を使用すると、どのブラウザーでも好きなように見せることができます。

編集：私のサイトからarrows.pngをダウンロードして、ローカルで使用するようにしてください。しばらくの間だけそこにあります。

于 2012-12-14T21:34:36.277 に答える