Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css button font size doesn't work

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:

input button won't take style

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:

style hitting element

But somehow the computed style isn't working:

computed style

(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:

with background color

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:

enter image description here

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.

like image 459
cutmancometh Avatar asked Feb 09 '14 09:02

cutmancometh


1 Answers

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.

like image 187
pzin Avatar answered Sep 20 '22 13:09

pzin