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

Question

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:

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

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 3

try this

<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }

#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF; 
}
</style>

Answer 4

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 5

I found a way of changing the font size of a select element in Safari through the use of percentages.
Your code then becomes:

<select name='make' style='font-size: 120%;'></select>

For a 13px font size (which I found very appealing).

This is tested in Safari 5.1.3

Answer 6

First off this

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

will not work because you are not styling the select element you are styling input elements. Try this and it will most likely work.

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