16

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.

intcreator
  • 4,206
  • 4
  • 21
  • 39
Justin
  • 4,649
  • 6
  • 33
  • 71

2 Answers2

30

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.

wtbgtr
  • 687
  • 1
  • 6
  • 11
  • 4
    I'd love to understand the reasoning for this. – Bill Criswell Feb 08 '13 at 01:11
  • 1
    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;` – allicarn Dec 18 '13 at 13:42
  • **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 – henry Jan 08 '15 at 23:49
  • 1
    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. – Neil Monroe Jun 07 '16 at 18:04
13

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

drudge
  • 35,471
  • 7
  • 34
  • 45
  • Fixes Safari, doesn't fix Chrome! – Justin Mar 18 '11 at 19:28
  • @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](http://www.electrictoolbox.com/style-select-optgroup-options-css/) explains which CSS attributes are supported. – drudge Mar 18 '11 at 19:38
  • I lied. Chrome is fixed. Took a while for the file to deploy properly. Many thanks. – Justin Mar 18 '11 at 20:05