제출 버튼의 색상이 이상하게 변경된 이유는 무엇입니까?

Question

특정 스타일이없는 제출 버튼의 기본 색상입니다. (사용 크롬)

그리고 이것은이 input[type="submit"]{border-radius: 2px;} 사용 후 그 버튼이다. 당신이 두 번째의 색을 보듯

은 특별한 이유없이 갑자기 변경 또한 당신은 바로 국경의 바닥면에 그림자를 볼 수 있습니다. (body{direction:rtl;})

이유가 무엇입니까? 난 그냥 비트 둥근 (더 이상) 기본 단추가 필요합니다. 어떤 해결책이 있습니까? 아니면이 이미지를 사용해야합니까?

JSFiddle here.

Answer 1

일반적인 unstyled 버튼은 시스템 UI 요소 (또는 Chrome의 경우 사용자 정의 요소)입니다. 따라서 CSS에 해당하지 않을 수 있습니다. 따라서 버튼의 스타일을 지정하려고하면 은 스타일이 가능하지만 다른 색상을 사용하는 일반 스타일로 되돌아갑니다.

비슷한 모양을 얻으려면 버튼의 모든 부분을 완전히 넘겨 받아야합니다 (그리고 이렇게해도 시스템 기본 버튼을 사용하는 Firefox 사용자는 충격을받을 것입니다).). 당신이 그 모습을 좋아한다면, 여기에 몇 가지 정도 (Demo)에 복제하는 방법은 다음과 같습니다

border: thin solid gray; 
border-radius: 2px; 
padding: 2px 4px; 
background-image: linear-gradient(white, lightgray); 

:hover 및 :active 상태 스타일링을 언급 할 필요가 없을 것입니다. 왜 당신의 페이지에 맞는 멋진 커스텀 룩을 만들어 낼 기회가 없습니까?

Answer 2

양식 제출 버튼의 스타일을 지정하려는 경우 완전히 스타일이 적용되는 button 요소를 사용하는 것이 좋습니다. input type=submit 요소는 스타일이 매우 다양하고 브라우저간에 일관성이 없습니다. <button>로 무엇이든 할 수 있습니다.