HTML select font-size

Question

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.

Solution 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.)

Solution 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.

Comments

[Justin]

Fixes Safari, doesn't fix Chrome!

[drudge]

@Justin: It -should- fix Chrome.. perhaps you could post your code so we can see exactly what's going on, rather than guessing? Also, this link explains which CSS attributes are supported.

[Justin]

I lied. Chrome is fixed. Took a while for the file to deploy properly. Many thanks.

[Bill Criswell]

I'd love to understand the reasoning for this.

[allicarn]

If you don't want to adjust the default border, you can also add a transparent shadow: font-size: 18px; -webkit-box-shadow: 0 0 0 transparent; box-shadow: 0 0 0 transparent;

[Admin]

Thanks. Works perfect.

[henry]

Looks like it can be any border property, except for border-collapse - one that's particularly unlikely to conflict with page styles is border-image: 0, or border-image: repeat. If using the invisible-box-shadow solution, you can shorten it to box-shadow: 0. ftr, outline doesn't work

[Neil Monroe]

Any property change that causes a redraw of the control will do the trick. background will also work. Interestingly, if you set a property to the same value as the user agent stylesheet is applying, then it will have no effect. It's the fact that the browser actually has to change the display of the element that triggers the new rendering.