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

@pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:

-webkit-appearance: button;

Answer 2

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.

Answer 3

Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.

Answer 4

I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.