Is there any way to add padding to select options via CSS?

Question

I want to add some kind of space (padding, margin or whatever) between select options in HTML using CSS. I am currently using Chrome and I've already tried using something like this:

 select option {
     padding: 10px
 }

However it didn’t work. I’ve already read that this is possible to do but it does not work in IE.

Anyway, I’d like to have this to work in other browsers even if it doesn't work in IE.

JSFiddle example

dub http://stackoverflow.com/questions/9615071/padding-doesnt-work-on-select-tags-in-safari and http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list — koningdavid, Jun 19 '13 at 10:14
checked both and didn't find it very useful since none of the instructions there solved this problem — Correia JPV, Jun 19 '13 at 10:29

score 17 · Accepted Answer · edited Nov 19 '20 at 00:25

17

Styling to select option is very much limited as to maintain a coherence and consistency among all the application in the operating system thus the browser are ought to restrict the style of some basic elements like in your case option tag.

The restriction depends browser to browser, like padding and even margin of option tag works in the Mozilla Firefox while it doesn't work with Chrome.

If it is very much necessary in you website to style the option tag then I suggest you to use some jQuery plugin (you can also make a drop down of your own, its simple).

edited Nov 19 '20 at 00:25

Giacomo1968

25,759
11
71
103

answered Jun 19 '13 at 10:25

sumitb.mdi

1,010
14
17

1

By talking about your own dropdown, It is the reason why we don't flash. There is a word "semantic". – atilkan Mar 08 '15 at 16:08
3

Remember when you use your own control you won't get browser autofill and other accessibility features - such as for addresses. For example even 6 years on from this question they haven't figured out how to get angular material design controls to work with autofill in chrome :-( – Simon_Weaver May 06 '19 at 19:04

score 12 · Answer 2 · answered May 28 '14 at 08:54

The appearance of option tags is determined by the browser in my experience and often for good reason - think about how differently the appearance is on iOS v chrome and the benefits of this.

You can exert some control of the select element however, by using the browser prefixed appearance attribute.

For example:

select {
    padding: 2px 10px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

However when clicked, they appear as they normally do in whatever browser you're using.

If you want finer control, your best bet I think is @sumitb.mdi's suggestion of a jquery plugin or build something similar yourself from scratch.

score 0 · Answer 3 · answered Sep 30 '21 at 13:42

0

<select></select> tag:- Changed have select css properties but not changed it's option values property if you want to change it's option property so add jQuery plugin otherwise create own dropdown(custom drop down).

answered Sep 30 '21 at 13:42

Ashish Bhangade

107
1
2
8

score 0 · Answer 4 · edited Jan 16 '23 at 03:29

I try all solutions but didn't work

The following code works for me.

<select>
<option value="1">Item 1 one</option>
<option value="" style="font-size:5pt;" disabled>&nbsp;</option>

<option value="2">Item 2 tow</option>
<option value="" style="font-size:5pt;" disabled>&nbsp;</option>

<option value="3">Item 3 three</option>
<option value="" style="font-size:5pt;" disabled>&nbsp;</option>

<option value="4">Item 4 four</option>
<option value="" style="font-size:5pt;" disabled>&nbsp;</option>

<option value="5">Item 5 five</option>
<option value="" style="font-size:5pt;" disabled>&nbsp;</option>

</select>

While this achieves similar to what is asked, this also semantically changes the content of the page which might not be intended. — tuesday, Jan 15 '23 at 17:45

Is there any way to add padding to select options via CSS?

4 Answers4

Linked

Related