Safari change select height

问题:

I can't change select height, with all browser working fine, but Safari no, where can be problem? Also I try make class .style select, but not working.

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

回答1:

Try adding this:

-webkit-appearance: menulist-button;

回答2:

You can also use

line-height: 25px

which doesn't affect other browsers, but fixes this bug in Safari

回答3:

To style a select in Safari, you first have to turn off the os styling:

-webkit-appearance: none;

回答4:

The best way use modernizer detector and give safari class select menu a

line-height: 20px;

or you can use jquery UI select menu to solve this by another cross-browser wy.

回答5:

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

This code ensures the same height across browsers.

回答6:

at least on iPad the select is not rendered for padding or line-height but instead will render given height and center vertically the value

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

the only thing unresolved now is background which is predefined and imutable

回答7:

Nothing worked for me until I used inline style:

<select name="pickupsel" id="pickups" style="line-height:33px">

Somehow Safari (latest Windows version, 5.1.7) doesn't read this style property from CSS file.

回答8:

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

Give line-height according your requirement.