Text size for drop down menu/input select not working in Safari

Question

Hello All,

First question...

I'm having trouble getting ANY of the Drop down menu/Input Select's to appear with size 18 font in Safari.

Works fine in FF.

Code:

<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>

Css:

.form input{
font-size:18px;
margin-bottom:0px;
}

Any ideas? Can view live at [http://www.motolistr.com][1]

Best, Nick

EDIT 1: Thanks for the quick reply. I added a style to the select itself to avoid confusion. I tried;

<select name='make' style='font-size: 18pt;'>
 </select>

And

<select name='make' style='font-size: 18px;'>
 </select>

And

<select name='make' style='font-size: 1.3em;'>
 </select>

Still not working in SAFARI...Again FF works fine with all 3.

Best, Nick

Answer 1

The select technically isn't an input tag. Try assigning a class to your select and set the style for the class.

EDIT: Turns out that Aqua style selects only have three different font sizes available. If you need to set an exact font size, you can turn off Aqua by giving the item a background color, then set the size. FYI, it appears that 20px works without setting the background so it must size up to the next supported Aqua size.

Reference: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Test page with various styles at http://particletree.com/examples/safari3/drop.html.

 <select name='make' class='big-input'>
 </select>


 .big-input
 {
     background: #fff; // turns off Aqua
     font-size: 18pt; // assuming you meant 18pt, not 18px
     margin-bottom: 0px;
 }

Answer 2

Thanks for the quick reply. I added a style to the select itself to avoid confusion. I tried;

<select name='make' style='font-size: 18pt;'>
 </select>

And

<select name='make' style='font-size: 18px;'>
 </select>

And

<select name='make' style='font-size: 1.3em;'>
 </select>

Still not working in SAFARI...Again FF works fine with all 3.

Best, Nick

Answer 3

It appers select controls are non-stylable in Safari; it always uses its own OS X-style widget drawing routines to display them. Until recently, this was the norm: browsers would typically use plain OS-provided widgets for form fields. CSS2 doesn't really say how styles should apply to form fields (if at all).

Some browsers today apply the select's font style to the options (IE7, Opera); some allow the on-page select and the pop-up options to be styled differently (Mozilla, Chrome), so the best you can do for consistency is:

.form select, .form option {
    font: Whatever 18px;
}

But if you absolutely need a stylable drop-down in Safari you will need to write your own clunky ersatz-select in JavaScript. (Or see one of the many existing scripts and framework plugins that do this.)

Answer 4

Funny thing though: If you change the background- or border-properties on your select Safari will all of a sudden also apply your font-size.

Answer 5

Setting line-height:100% will constrain the height of the select box for a more consistent look, but it still doesn't affect the actual font size.