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 37 · Accepted Answer · answered Jan 24 '13 at 20:08

37

Try adding this:

-webkit-appearance: menulist-button;

answered Jan 24 '13 at 20:08

Labokas

585
5
7

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 31 · Answer 2 · answered Jul 04 '13 at 11:30

31

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

475
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

861
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 · edited Apr 10 '15 at 07:29

3

@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,392
3
36
47

answered Apr 10 '15 at 06:53

DziNeR dAsS

31
2

score 3 · Answer 5 · 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,556
2
22
16

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,511
3
19
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,835
15
54
71

answered Jul 08 '14 at 08:35

user3815518

11
1

score 1 · Answer 9 · answered Jun 24 '22 at 08:18

1

This is how I am solving this in 2022:

select, input {
    font-size: 14px; //or whatever
    height: 3em;
    line-height: 3em;
    padding: 0; //top and bottom must be 0
    -webkit-appearance: none;
}

answered Jun 24 '22 at 08:18

Mladen Janjetovic

13,844
8
72
82

This works for the height but removes the up/down arrows for me on Safari 15.6.1, macOS 12.5.1 – RC Whim Sep 21 '22 at 02:25
@RCWhim - Yes, if you want to style it yourself, you will have to do the arrows also. Hence the `appearance:none` – Mladen Janjetovic Sep 21 '22 at 10:57

score 0 · Answer 10 · answered Nov 30 '22 at 13:35

0

This is how I am solving this in 2022:

    select {
      background-color: inherit;
    }

answered Nov 30 '22 at 13:35

Daniel Devine

1

Safari change select height

10 Answers10

Linked