18

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

12 Answers 12

58

To style a select in Safari you first have to turn off the os styling:

select {
    -webkit-appearance: none;
}
1
  • This answer will remove the webkit appearance, which some people might want to keep. My answer below will increase the size without getting rid of the webkit appearance. Aug 16, 2013 at 21:52
17

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.

11

I figured out a way that safari will pick up on font-size ... all you need to do is set a border color, like the following.

-webkit-appearance: none; will make you lose all of safari's attributes, like the arrows... below you can increase the size without losing that.

Will Work in Safari

<select style=" font-size: 3em; border: black;">
    <option>TEXT</option>
</select>

Won't Work in Safari

<select style=" font-size: 3em;">
    <option>TEXT</option>
</select>
3
  • 2
    border: black; was not enough for me (Safari 7.0.2). I needed to write border: 1px solid #9C9C9C;, where #9C9C9C is the default border color of select fields. Mar 4, 2014 at 14:03
  • @MichaelManner Are you sure, I just ran a test here: i.imgur.com/1jaVPyJ.png Mar 4, 2014 at 18:05
  • You can also use some other border or background property that is not really utilized for the element if setting the border explicitly is not desired. Such as: border-image-width: 0; Triggering a redraw of the control is the key. Jul 27, 2016 at 16:32
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.)

2

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;
}
2

At least in Safari 5.1 (I don't have 3 running anymore) you can turn off the default styling with:

select{-webkit-appearance: none}

Then it will conform to your font sizing.

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;
 }
4
  • Hmmm. Maybe apply the same class to all of the options?
    – tvanfosson
    Feb 2, 2009 at 13:49
  • Not 18pt please - never use pt on web pages for screen display!
    – bobince
    Feb 2, 2009 at 13:50
  • He said "size 18 font" which is why I changed it to 'pt' -- I typically use percentages or em to size fonts.
    – tvanfosson
    Feb 2, 2009 at 14:33
  • Thanks again for the followup, I did some testing... It appears that even 20px displays much differently between browsers. I'll probably end up making some javascript for the menu. I made a screenshot. FF on the left. Safari on the right. dl-client.getdropbox.com/u/5822/ff-safari.tiff
    – Nick
    Feb 2, 2009 at 23:43
1

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.

1

In some cases it can help:

select {
    -webkit-appearance: menulist-button;
    font-size: 30px;
}
0

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

0

You can target Safari select tag by doing this:

select {
    width: 224px;
    line-height: 1.8;  (This can be in px too)
}
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.