css кнопка размер шрифта не работает

Question

Я не могу получить кнопку ввода, чтобы изменить ее размер шрифта, если я не изменю цвет фона.

этот HTML:

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

и этот CSS:

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

результат в этом:

который является точно такой же, как и без каких-либо стиля вообще.

Ничего, что я делаю с помощью css, не меняет его: делает его 60em; изменение того, как я его выбираю; все они приводят к тому же, по умолчанию кнопка.

Я осмотрел его в Chrome, и стиль фактически ударять элемент, а не получать переопределен:

Но как-то вычисленный стиль не работает:

(это с базовым размером шрифта 1em для всего документа и, нет, изменение базового размера шрифта не влияет)

Единственное, что изменяет размер шрифта это, если я дам ему цвет фона:

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

результаты в этом:

Может кто-нибудь сказать мне, что происходит?

EDIT: @Hashem Qolami, спасибо, что разместили его во внешнем редакторе, который я должен был сделать. Когда я смотрю на свой JS бункером, это выглядит следующим образом:

EDIT 2: это конкретный браузер.

Ошибка возникает только в Chrome, Safari и Opera и только на Mac.

Если вы правильно используете Firefox для Mac и всех браузеров (IE10, Chrome, Firefox, Safari и Opera) в Windows.

Answer 1

@ Ответ pzin заставил меня начать на правильном пути. Он прав в том, что все, что нарушает аква, поможет. Рекомендуемый способ справиться с этим, не указывая цвета фона, это плохой мальчик:

-webkit-appearance: button; 

Answer 2

Действительно, это происходит только на WebKit-MacOS на основе браузеров. Кажется, это ограничение WebKit, так что Aqua выглядит.

До тех пор, пока внешний вид Aqua включен для кнопок, некоторые свойства CSS будут игнорироваться. Поскольку кнопки Aqua не масштабируются, свойство height не будет выполнено. Аналогично, настройки шрифта и цвета также не будут выполнены.Принципиальным принципом для кнопок является то, что вы никогда не увидите кнопку, которая представляет собой смесь «half-Aqua». Либо кнопка будет выглядеть совершенно родной, либо вообще не будет Aqua.

Источник: https://www.webkit.org/blog/28/buttons

Это объясняет, почему установка фона делает font-size работы; он нарушает внешний вид Aqua.