CSS styled select

HTML

<h1>CSS styled select</h1>

<p>Based on StackOverflow question:<br /><a href="http://stackoverflow.com/q/16631801/328272" target="_blank">Why does using `-webkit-appearance: none` on a select option in OSX make the text disappear?</a>.</p>

<form>
    <select>
        <option value=""></option>
        <option value="231" selected="selected">Google</option>
    </select>
</form>

<p>Bottom pixels from letters tend to fall off in different browsers, see comments in CSS.</p>

<p>Also see <a href="http://formalize.me" target="_blank">Formalize</a> to "teach your forms some manners" and <a href="http://github.hubspot.com/select/docs/welcome/" target="_blank">Select</a> for "styleable select elements".</p>

CSS

select {
    /* Should be supported by FF (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance) but it appears not to be the case. */
    -webkit-appearance: none;
    -moz-appearance: none;


    /* A 53px height should be sufficient (2*border + 2*padding + 1*line-height), but Chrome 34 needs 55px, IE11 56px and FF28 57px to completely display letters. */
  
}