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

You can target Safari select tag by doing this:

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

Answer 2

In some cases it can help:

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

Answer 3

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>

Answer 4

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

select {
    -webkit-appearance: none;
}

Answer 5

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.

Answer 6

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.