Safari change select height

Question

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

I think the height of a select in Safari is linked to the text size and you can't set it on its own. — boz, Nov 06 '12 at 14:23

score 34 · Accepted Answer · answered Jan 24 '13 at 20:08

34

Try adding this:

-webkit-appearance: menulist-button;

answered Jan 24 '13 at 20:08

Labokas

545
5
6

2

Doesn't works with Safari on Windows machine, but Line-Height property is enough to style the height of Select tag – Deepak Yadav Jun 22 '15 at 06:50
1

This is the only working method since Safari Version 10.1.2. Line height no longer works. – Ahmad Alfy Sep 07 '17 at 12:06
This does not work for me, 1/1/2020. I have to set `-webkit-appearance: none;` and use a css hack to add my own drop-down arrow icon – turkinator Jan 03 '20 at 16:59

score 30 · Answer 2 · answered Jul 04 '13 at 11:30

30

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

-webkit-appearance: none;

answered Jul 04 '13 at 11:30

Marjan Stanojevic

465
4
8

3

True, but this will hide the dropdown arrow. Therefore the best option is line-height (see answer above). – Gilad Barner Feb 25 '15 at 09:48
1

This does hide the drop-down arrow, but it does also successfully strip the offensive styling - clean palette. +1 – David H. Feb 07 '17 at 22:12
1

This can be useful for those making a stylized select drop down by hiding the original select and having an overlay to look like the styled drop down. – Jeremy Trpka Dec 20 '19 at 12:58

score 27 · Answer 3 · answered Jul 04 '13 at 14:43

27

You can also use

line-height: 25px

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

answered Jul 04 '13 at 14:43

hobailey

851
1
12
22

2

`line-height` seems to be ignored 9.1.3, however `height: 25px` is working. Unfortunately `min-height` is also not working. – David H. Feb 07 '17 at 22:16
3

`height` or `line-height` does not work in version 10.1.2 – Ralph David Abernathy Aug 02 '17 at 13:53

score 3 · Answer 4 · answered Aug 24 '16 at 05:31

3

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.

answered Aug 24 '16 at 05:31

Sanjib Debnath

3,088
1
21
16

score 2 · Answer 5 · edited Apr 10 '15 at 07:29

2

@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.

edited Apr 10 '15 at 07:29

David

3,312
3
34
46

answered Apr 10 '15 at 06:53

DziNeR dAsS

21
2

bortunac · Answer 6 · 2015-05-26T14:20:35.470

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

score 1 · Answer 7 · answered May 20 '14 at 01:17

1

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.

answered May 20 '14 at 01:17

Sergey Lost

2,431
2
18
22

score 1 · Answer 8 · edited Jul 08 '14 at 09:09

1

@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.

edited Jul 08 '14 at 09:09

laaposto

11,377
15
52
68

answered Jul 08 '14 at 08:35

user3815518

11
1

Safari change select height

8 Answers8

Linked