Chrome doesn't apply padding to select options

Question

Select option fill not working in Chrome

<style>
select option { padding:5px 0px; }
</style>    
<select>
<option>1</option>
<option>2</option>
<option>3</option> 
</select>

Answer 1

I just found a way to apply padding to a select input in chrome

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

Seems to work in current chrome 39.0.2171.71 (64 bit) and safari (I've only tested on Mac).

This appears to remove the default style added to the select input (it also removes the dropdown arrow), but allows you to use your own style without Chrome overriding it.

I stumbled across this fix while using code from here: http://fettblog.eu/style-select-elements/