RonakP RonakP - 3 months ago 36x
jQuery Question

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

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

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


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


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

select option {
    background: rgba(0,0,0,0.3);
    text-shadow:0 1px 0 rgba(0,0,0,0.4);

sources: 1,2