2013-08-09 2 views
-1

업데이트 :이 질문에 설명하는 문제는 OS X 브라우저에만 영향을 미칩니다.CSS에서 버튼의 글꼴을 스타일링하는 방법은 무엇입니까?

이 같은 더 많거나 적은 CSS에서 내 입력 버튼의 font 스타일을 변경하려면 : 불행하게도

input[type="button"] 
{ 
    font: italic bold 3em fantasy; 
} 

,이 OS X에 크롬, 사파리와 오페라 에서 잘 작동하지 않습니다 또한 내가하지 않으려는 기본값 인 background-color을 변경하지 않는 한.

는 여기를 참조하십시오 : http://jsfiddle.net/S7y5B/

enter image description here

그래서 제 질문은 간단하다 : 어떻게 모든 브라우저가 이해할 수있는 방식으로, 배경색을 변경하지 않고 버튼의 글꼴을 변경할 수 있습니까? 위의 JsFiddle 예제에서 버튼 2는 Button 2처럼 보이지만 백그라운드 색상은 변경되지 않았습니다. 어떻게 할 수 있습니까?

+1

내가 .. 하드는 변경 글꼴 배경색없이 작동하지 않습니다 믿고 찾을 정말 일이 뭐죠입니까? 나는 당신의 바이올린에서 그것을 바꿀 수있었습니다. – Krishna

+0

** 무엇이 ** 잘 작동하지 않습니까? 글꼴이 변경되어 나와 읽을 수 있습니다. 글꼴을 바꾸는 것 외에 다른 것을 시도하고 있습니까? 내가 놓친 게 있니? 패딩이나 다른 걸 말하는거야? – hungerstar

+0

Chrome 28 및 Opera 12에서 잘 작동합니다 ... – LinkinTED

답변

0

좋아, 나는 그것을 스스로 알아 냈다. 나는

-webkit-appearance: button; 

버튼 내부의 텍스트 이제 배경색을 설정 필요없이 예상 글꼴로 렌더링됩니다를 사용하여 버튼을 스타일링하고 있습니다. 국경은 여전히 ​​약간 다르게 보입니다. 그러나 그것은 또 다른 질문입니다.

JSsFiddle :http://jsfiddle.net/S7y5B/18/

enter image description here

0

Screenshot

귀하의 버튼은 같은 보여요.

편집 OS.X 크롬 : enter image description here

+2

에서 다르다. –

1

그것으로 바이올린을 켜는 후에는 OSX 그들에게 일 정상 스타일에도 불구하고 버튼을 바꿀 것 같다. height과 같은 속성 (요소가 display:block으로 설정된 경우에도), font 속성 및 padding은 렌더링되지 않습니다. 실제 스타일링을 보려면 요소의 border 또는 background의 스타일을 지정해야합니다.

colorwidth 속성이 정상적으로 렌더링 된 것 같습니다.

+0

는 네 그 통해 UR 응답 @의 FT1 –

+0

이야 생각 http://jsfiddle.net/S7y5B/12/없는 http://jsfiddle.net/S7y5B/11/는 1 버튼 아니다 여기에서 ... 명확하지 여전히 죄송합니다 ariel font cos css 인라인이라고 생각하십니까? –

+0

@AlexGarulli 예제에서 단추가 모두 노란색입니다. –

관련 문제