0

This must be a duplicate, but I can only find other questions where font sizes have been explicitly defined in CSS. Here I am using the browser default font size.

I've noticed that in Firefox/IE11/Edge that the default font size is smaller in a list's option element, than what is used by default in the containing label, or parent container:

Option font size Fiddle

No doubt its in the HMTL5 spec's, which is fine. The question is, is it possible to make the font size the same (relatively) as it's containing label (so there is no shrinkage in size) without specifying a font-size (e.g. 16px)? So, the word "Select" and the word "Foo" would be the same font size.

I've tried both...

select {font-size:1em;}
select {font-size:100%;}

...without success.

Community
  • 1
  • 1
EvilDr
  • 8,943
  • 14
  • 73
  • 133
  • What seems to be the problem with `1em`? Is it a particular browser? I tried [this fiddle](https://jsfiddle.net/yywhnvyv/) in Chrome and IE11 and it appears the correct size. – jeffjenx Mar 03 '16 at 16:38
  • In Chrome for me, "Foo" is definitely a smaller font size than "Select" – EvilDr Mar 03 '16 at 18:26
  • That's weird. When I use `font-size: 1em;` it is the exact same size. [Fiddle for proof](https://jsfiddle.net/yywhnvyv/2/). – jeffjenx Mar 03 '16 at 19:29

1 Answers1

1

You may try this.

label {
 font-size:1em;
}

select{
  font-size:inherit;
 -webkit-appearance: none;
 -moz-appearance: none;
    appearance: none;
 }

This will make them the same size without specifying a unit.

Lester Vargas
  • 370
  • 2
  • 6
  • 23
  • `font-size:inherit;` indeed does work perfectly, thank you. Why the `appearance:none` though? – EvilDr Mar 03 '16 at 18:28
  • In fact, it even works without specifying a font size on the label (see https://jsfiddle.net/82fk3bv4/1/) – EvilDr Mar 03 '16 at 18:29
  • Although bizarely Firefox doesn't properly render the border when the down arrow is clicked to reveal the list item... [Reported bug https://bugzilla.mozilla.org/buglist.cgi?bug_id=924068&list_id=12887892] – EvilDr Mar 03 '16 at 18:31