HTML select font-size

问题:

I'm having trouble setting HTML <select> font-size on OS X Safari and Chrome. Basically the attribute is ignored, unless I zoom in or out in which case the attribute is magically recognised. Anyone seen the same thing / know of a workaround ? Works fine with OS X Firefox, which leads me to think it's a Webkit issue.

回答1:

You'll need to turn off the default OS styling with: -webkit-appearance: none;
(If you're making a highly-styled dropdown, this is essentially a complete style reset.)

Live Demo

---

You could also try: -webkit-appearance: menulist-button;
(Though I'm not sure how other style effects will affect this one.)

回答2:

I just ran into this as well, and found a better solution than -webkit-appearance:none (which looks clunky to me without extra styling). You can make the font size bigger while keeping the standard webkit appearance if you set a border color.

select {
    font-size:1.2em;
    border-color:#999; /* without this, it won't work */
}

Pretty silly, but at least it works, and in both Chrome and Safari.