Changing font size in drop down

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, Jul 11 '13 at 18:32
"Unfortunately what you ask is not possible by using pure CSS." — isherwood, Jul 11 '13 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, Jul 11 '13 at 18:35
I happened to notice that the jsfiddle does not have any `font` or `font-size` in it. — Mr Lister, Jul 11 '13 at 18:36
Fair enough. The nice thing about SO is that popular questions are often updated with more recent solutions. — isherwood, Jul 11 '13 at 18:36
@MrLister No, that version does not. I was playing with it and no matter where I put a font or font-size nothing showed up. Apparently what I'm trying to do is impossible. — zazvorniki, Jul 11 '13 at 18:39
If you give both `select` and `option` a size, it works on many browsers. http://jsfiddle.net/MrLister/v82D8/2/ — Mr Lister, Jul 11 '13 at 18:40
@MrLister I just tested it in safari and chrome and on a phone and it's not working for me... — zazvorniki, Jul 11 '13 at 18:42
@zazvorniki Can you provide a screenshot of what it looks like for you? Here's mine: http://i.stack.imgur.com/sX41n.png — Mr Lister, Jul 11 '13 at 19:05

score 0 · Answer 1 · answered Jul 11 '13 at 18:45

0

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

select{
    font-size: 130%;
}

answered Jul 11 '13 at 18:45

Scottzozer

this does not work with safari or chrome though – zazvorniki Jul 11 '13 at 18:45
works in chrome because that is where I tested it – Scottzozer Jul 11 '13 at 18:49
And it works in firefox and IE – Scottzozer Jul 11 '13 at 18:51
I have been testing it in chrome and all it does on my end is move the select box a little to the right. – zazvorniki Jul 11 '13 at 18:52
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) – Scottzozer Jul 11 '13 at 18:54
I tested in Opera too and it works there as well. Under Windows and Linux. – Mr Lister Jul 11 '13 at 19:02

score 0 · Answer 2 · answered Jul 11 '13 at 18:45

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 '13 at 18:45

aldux

this does not work in either safari or chrome though – zazvorniki Jul 11 '13 at 18:47
There's something odd about your problem... This is supose to work in all browsers, as the answer above. Does this works for you: http://jsfiddle.net/f3G2S/ ? – aldux Jul 11 '13 at 18:50
@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? – Shauna Jul 11 '13 at 18:51

2 Answers2