CSS 버튼 글꼴 크기가 작동하지 않습니다.

Question

배경색을 변경하지 않으면 입력 버튼을 사용하여 글꼴 크기를 변경할 수 없습니다.

이 HTML :

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

이 CSS이있는

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

결과 :

전혀 스타일링과 완전히 동일하다.

나는 CSS에 그것을 변경하지 않는다 : 그것을 60em; 내가 선택한 방법을 변경; 그것들은 모두 동일한 기본 모양의 단추가됩니다.

그러나 어떻게 든 계산 된 스타일이 작동하지 않습니다 :

나는 스타일이 실제로 요소를 타격하고, 무시 가져 오지 크롬에서 그것을 검사하고,

(전체 문서의 기본 글꼴 크기가 1em이고, 기본 글꼴 크기를 변경하면 아무 효과가 없습니다)

나는 그것을 배경 색 줄 경우는 글꼴 크기를 변경하는 유일한 것은이의

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

결과 :

사람이 무슨 일이 일어나고 있는지 말해 줄래?

EDIT : @Hashem Qolami, 외부 편집기에서 게시 해 주셔서 감사합니다. 나는 당신의 JS 빈에서 볼 때, 그것은 다음과 같습니다

편집 2 : 그것은 브라우저 특정입니다.

오류는 Chrome, Safari 및 Opera에서만 발생하며 Mac에서만 발생합니다.

Mac 용 Firefox 및 Windows의 모든 브라우저 (IE10, Chrome, Firefox, Safari 및 Opera)에서 올바르게 렌더링되는 경우.

Answer 1

@ pzin의 응답으로 올바른 방향으로 나를 시작하게되었습니다. 아쿠아를 부수는 모든 일이 성공할 것입니다. 배경색을 지정하지 않고도이를 처리하는 가장 좋은 방법은 다음과 같습니다.

-webkit-appearance: button; 

Answer 2

실제로 이것은 WebKit-MacOS 기반 브라우저에서만 발생합니다. 아쿠아 모양이 항상 그렇듯이 WebKit 제한으로 보입니다.

푸시 버튼에 아쿠아 모양이 활성화되어 있으면 특정 CSS 속성이 무시됩니다. 아쿠아 버튼은 크기가 조정되지 않기 때문에 높이 속성은 적용되지 않습니다. 마찬가지로 글꼴 및 색상 사용자 정의도 적용되지 않습니다..푸시 버튼의 가장 중요한 원칙은 "반 아쿠아"믹스 인 버튼을 보지 못하게하는 것입니다. 버튼이 완벽하게 기본으로 보이거나 전혀 아쿠아가되지 않습니다.

출처 : https://www.webkit.org/blog/28/buttons 배경이 font-size 작품을 만드는 설정 이유를 설명

; 그것은 아쿠아 모양을 깨뜨린다.