css button font size doesn't work

Question

I can't get a input button to change its font size unless I change the background color.

this html:

<input type="button" id="startStop" value="start" />

and this css:

input#startStop{
    font-size: 3em;
}

result in this:

which is exactly the same as with no styling at all.

Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.

I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:

But somehow the computed style isn't working:

(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)

The only thing that changes the font size it is if I give it a background-color:

input#startStop{
    font-size: 3em;
    background-color: white;
}

results in this:

Can anybody tell me what is going on?

EDIT: @Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:

EDIT 2: it's browser specific.

The error is only occurring on Chrome, Safari and Opera, and only on Mac.

If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.

Answer 1

Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.

As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.

Source: https://www.webkit.org/blog/28/buttons

Which explains why setting a background makes font-size works; it breaks the Aqua appearance.