Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box.
Can someone help me pinpoint the issue in this code?
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>
Check out this fiddle to see how it appears on Firefox and then on Chrome: http://jsfiddle.net/wL8Rs/
I'm using the latest versions of Chrome (34.0) and Firefox (29.0).