Changing font size in drop down [duplicate]

Question

I'm trying to style a form an some of the elements in my form are drop down menus. I am having trouble styling these items.

I have tried calling the select and then option like this

.writerBox select option{
  height:2em;
  font-size:2em;
}

and I have tried just calling the select. Is there something I'm missing here or a trick to make the font larger?

I have set up a jsFiddle to play with. Any help would be wonderful!

I have looked at that and the answer was to create a div and then an ul list. If possible I would like to stick with the select menu. I have dynamic information coming in. — zazvorniki
– zazvorniki, Commented Jul 11, 2013 at 18:32
"Unfortunately what you ask is not possible by using pure CSS." — isherwood
– isherwood, Commented Jul 11, 2013 at 18:34
I believe those answers, I was just hopping since that was posted two years ago that things had changed and this was now possible. Besides I have multiple...more then ten dynamic selects so to change them all would be a pain...and then fix them for mobile. — zazvorniki
– zazvorniki, Commented Jul 11, 2013 at 18:35
I happened to notice that the jsfiddle does not have any font or font-size in it. — Mr Lister
– Mr Lister, Commented Jul 11, 2013 at 18:36

Scottzozer · Accepted Answer · 2013-07-11 18:45:06Z

0

You can just set font-size of the select to a percent larger than 100

select{
    font-size: 130%;
}

JSFIDDLE

answered Jul 11, 2013 at 18:45

Scottzozer

1269 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

zazvorniki Over a year ago

this does not work with safari or chrome though

Scottzozer Over a year ago

works in chrome because that is where I tested it

Scottzozer Over a year ago

And it works in firefox and IE

zazvorniki Over a year ago

I have been testing it in chrome and all it does on my end is move the select box a little to the right.

Scottzozer Over a year ago

I think you may have some other issues then with your code... Can you elaborate on how you are using this? because it def works in all three of those browsers for me (using the jsfiddle)

|

aldux · Accepted Answer · 2013-07-11 18:45:57Z

0

If you are talking about changing the font of the select as a whole, this will do:

.writerBox select{ 
    font-size:60px;
}

answered Jul 11, 2013 at 18:45

aldux

2,8042 gold badges26 silver badges36 bronze badges

3 Comments

zazvorniki Over a year ago

this does not work in either safari or chrome though

aldux Over a year ago

There's something odd about your problem... This is supose to work in all browsers, as the answer above. Does this works for you: jsfiddle.net/f3G2S ?

Shauna Over a year ago

@zazvorniki - I just tested this in Chrome and it does, indeed, change the font size of the options, though it also changes the font size of the selected one (the one visible when the list is closed). Perhaps you're expecting a different behavior?

Collectives™ on Stack Overflow

Changing font size in drop down [duplicate]

2 Answers 2

6 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Linked

Related