CSS select box good on Chrome bad in Firefox

Question

i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.

Can you help me out finding whats wrong with this code please:

CSS:

select{
    min-width: 100%;
    width:inherit;
    background: #fff;
    height: 33px;
    border-radius:5px;
    font-size: 15px;
    border:none;
    box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
    padding:5px;
}

HTML

<select>
    <option>hey</option>
    <option>hey2</option>
    <option>hey3</option>

</select>

Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!

http://jsfiddle.net/wL8Rs/

I'm using Chrome latest 34.0 version and Firefox latest 29.0 version

Answer 1

Add padding to select

select{
     min-width: 100%;
     width:inherit;
     background: #fff;
     height: 33px;
     border-radius:5px;
     font-size: 15px;
     padding:5px;
     border:none;
     box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}

http://jsfiddle.net/wL8Rs/3/