How to set height Or Padding in select box (dropdown box) for safari and chrome?

Question

I want to set height or width in selectbox .

<?php $subjectList=array('0'=>'Questions','1'=>'Feedback / Suggestions','2'=>'Location Owner Inquiry' ,'3'=>'Other');?>

<select name="vSubject" data-errormessage-value-missing="Select Reason!" id="vSubject"  >
   <option value="" >-Select One-</option>
   <?php foreach($subjectList as $r=>$k) { ?>
         <option value="<?php echo $r?>" ><?php echo $k?></option>
   <?php }?>
</select>

Padding and height is not working in SAFARI. So suggest some solution.

possible duplicate of http://stackoverflow.com/questions/13252835/safari-change-select-height — Suresh Ponnukalai, Jul 28 '14 at 10:28
And what about 'option' ? If I want to set height or padding, thn ? — Ronak Patel, Jul 28 '14 at 10:47

score 3 · Accepted Answer · edited May 23 '17 at 12:17

3

Did you try this CSS for your drop down?

overflow: hidden;
border: none;
outline: none;
-webkit-appearance: none;

For Safari you can try

-webkit-appearance: menulist-button;

so that width and height will work (link)

then you can use background,font-family,padding etc to further enchant your custom select tag. It worked for me in Safari/Chrome/FF ...

EDIT:

Editing option tag is not that easy. You can use the css below but everything is not customisable unfortunately

select option {
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

sources: 1,2

edited May 23 '17 at 12:17

Community

1
1

answered Jul 28 '14 at 10:25

trainoasis

5,993
11
47
79

And what about 'option' ? If I want to set height or padding, thn ? – Ronak Patel Jul 28 '14 at 10:46
option is the one thing you can't edit properly unfortunately. I think background property works (colour and stuff) but height and padding I'm afraid not. see my edited answer – trainoasis Jul 28 '14 at 10:54

score 2 · Answer 2 · answered Jul 28 '14 at 10:30

2

Fiddle here Use a combination of text-indent and line-height to create the illusion of padding. Works in Safari.Should work in IE as well.

#vSubject {
    text-indent:15px; line-height:28px;
}

answered Jul 28 '14 at 10:30

hahaha

962
1
15
31

score 0 · Answer 3 · answered Jul 28 '14 at 10:27

0

try like this.

select {
 width: 170px; 
 height: 25px;
 -webkit-appearance: menulist-button;
}

answered Jul 28 '14 at 10:27

Suresh Ponnukalai

13,530
5
33
52

And what about 'option' ? If I want to set height or padding, thn ? – Ronak Patel Jul 28 '14 at 11:08

score -1 · Answer 4 · edited Jul 06 '16 at 15:38

-1

select { line-height : 28px; float : left; }

edited Jul 06 '16 at 15:38

elreeda

4,357
2
17
44

answered Jul 06 '16 at 10:49

Friend

484
4
10

How to set height Or Padding in select box (dropdown box) for safari and chrome?

4 Answers4