Possible to add padding to a html options cross browser?

Question

I would like to add padding around my options in an html select (both a drop down list and a select box). I am able to do this in Firefox using CSS padding, but it appears that is the only browser this works for. Code:

option
{
 padding:5px;   
}

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<br/>
Some other stuff:<br/>
<select multiple="multiple">
    <option>Test1</option>
    <option>Test2</option>
</select>

Fiddle:

http://jsfiddle.net/4u9LV/

I found this question, which talks about adding left and right padding using   but I want all around padding. Is there an good way to implement what I am getting in firefox, across all browsers?

score 1 · Answer 1 · answered Dec 20 '12 at 17:20

1

AFAIk it's only Firefox which will really support styling for this.

There is no cross-browser plain CSS way to implement padding/margin etc on SELECT elements or their OPTIONS.

I guess the only way to do it would be to cheat and use DIVS or a UL instead and make that work using JS.

answered Dec 20 '12 at 17:20

Billy Moat

20,792
7
45
37

I once stumbled upon a JavaScript Reset for the HTML Forms elements which allowed you to style all the Form elements including option & select cross browser. For the life of me, I lost the link. Any ideas? – Jawad Dec 20 '12 at 17:25

score 1 · Accepted Answer · answered Dec 20 '12 at 17:27

Input elements in conventional browsers are "black boxes" - their parts are not DOM elements strictly speaking. And yet, behaviors of input elements and their styling are not specified anywhere in W3C specs.

Input styling is deliberately unspecified. So browsers are free to do whatever they want. And so to ignore any styling you define.

so better option is do this by JavaScript with div or list

Possible to add padding to a html options cross browser?

2 Answers2