css - サファリ変更選択の高さ

Question

すべてのブラウザが正常に動作しているため、変更できませんselect heightが、Safari は変更できません。どこに問題があるのでしょうか? また、 make class を試し.style selectましたが、機能しません。

select {
width: 170px; 
height: 25px;
}

score 34 · Accepted Answer

34

これを追加してみてください：

-webkit-appearance: menulist-button;

于 2013-01-24T20:08:36.463 に答える

score 27 · Accepted Answer

使用することもできます

line-height: 25px

これは他のブラウザには影響しませんが、Safari でのこのバグを修正します

score 3 · Accepted Answer

モダナイザー検出器を使用し、サファリクラスの選択メニューを提供する最良の方法

line-height: 20px;

または、jquery UI 選択メニューを使用して、別のクロスブラウザーでこれを解決できます。

score 2 · Accepted Answer

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {
        -webkit-appearance: menulist-button !important;
        line-height:24px !important;
    }
}

このコードは、ブラウザー間で同じ高さを保証します。

score 2 · Accepted Answer

少なくとも iPad では、選択はパディングまたは行の高さのためにレンダリングされませんが、代わりに指定された高さをレンダリングし、値を垂直方向に中央揃えします

select {
   -webkit-appearance:menu-item; // or menulist-button
   -moz-appearance:menu-item;
   height:2.4em;   // this must be calculated to match other input types     
}

input[type="text"], select {
    min-width:12em;  
    border-radius:5px;
}

現在未解決の唯一のものは、定義済みで不変の背景です

score 1 · Accepted Answer

@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button !important; line-height:24px !important; } }

line-heightあなたの条件に従って与えて下さい。

css - サファリ変更選択の高さ

8 に答える 8

Related

Reference