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?

Answer 1

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