Css button font size not working

Question

I can not get the enter button to change the font size if I do not change the background color.

this html:

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

and this css:

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

will result in the following:

which is exactly the same as in the absence of style.

Nothing I do with css changes it: makes it 60em; a change in how I choose it; all of them lead to the same button by default.

I tested it in Chrome and the style actually hits the element and does not get overrides:

But somehow the computed style doesn't work:

(that with a base font size of 1em for the entire document and, no, changing the base font size has no effect)

The only thing that will change the font size if I give it a background color:

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

leads to the following:

Can anyone tell me what's going on?

EDIT: @Hashem Qolami, thanks for posting it in an external editor that I had to do. When I look at your JS bean, it looks like this:

EDIT 2: specific browser.

The error occurs only in Chrome, Safari and Opera browsers and only on Mac.

If correctly displayed in Firefox for Mac and in all browsers (IE10, Chrome, Firefox, Safari and Opera) on Windows.

Answer 1

Answer to

@pzin made me get started on the right track. It is right that everything that violates the aqua will help. The recommended way to handle this without specifying the background color is a bad boy:

 -webkit-appearance: button; 

Answer 2

Indeed, this only happens in WebKit-MacOS-based browsers. This seems to be a limitation of WebKit, so the look of Aqua always stays that way.

While the Aqua feature is enabled for buttons, some CSS properties will be ignored. Because the Aqua buttons do not scale, the height property will not be executed. Similarly, font and color settings will also fail . The principle principle for buttons is that you will never see a button that is a half-aqua mix. Either the button will look completely natural, or there will be no Aqua at all.

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

This explains why setting the background does font-size ; It disrupts the look of Aqua.