2012-07-16 7 views
50

버튼을 만들고 표준 버튼 이미지 대신 내 자신의 이미지를 삽입하려고했습니다. 그러나 표준 단추의 회색 테두리는 여전히 검은 색 단추 이미지 바깥쪽에 표시됩니다.버튼에서 테두리 제거

버튼에서 회색 테두리를 제거하는 방법을 아는 사람이 있습니까? 그렇다면 이미지 자체 일뿐입니다. 고맙습니다.

+0

나는 모든 의견을 고맙게 생각합니다. – JamesonW

+2

참고 : 링크가 작동하지 않습니다. – alexander

답변

101

당신의 버튼에

padding: 0; 
border: none; 
background: none; 

를 추가합니다.

데모 :

+0

감사합니다 ..하지만 당신이 스타일 시트에 말했듯이 그것은 불행하게도 작동하지 않았습니다. 만약 내가 차이를 만들 것이라고 그냥 HTML로 바로 그것을 포함해야합니까? – JamesonW

+0

버튼에 'background : none;'을 더한 바이올린을 추가했습니다. 바이올린을 쳐다보고 그게 효과가 있는지보십시오. – Vestride

2

사용해보십시오 : border:0; 또는 border:none;

1

일반적인 트릭은 이미지 자체 대신 버튼의 링크의 일부를 만드는 것입니다. 그런 다음 "클릭"이벤트를 사용자 지정 처리기로 바인딩합니다.

Jquery-UI 또는 Bootstrap과 같은 프레임 워크는 기본적으로이 작업을 수행합니다. 그 중 하나를 사용하면 전체 응용 프로그램 개념을 훨씬 쉽게 할 수 있습니다.

0

background:none;border:0px 버튼을 사용해 볼 수도 있습니다.

또한 CSS 선택기는 div#yes button{..}div#no button{..}입니다. 희망이 도움이

+0

또한 img 태그 –

+0

을 사용하거나 이미지 대신 버튼의 배경을 설정할 수도 있습니다. 'background : # 555; font-weight : bold : color : #fff; 패딩 : 6px 8px, –

5

저도 같은 문제가 있었는데이 CSS에서 내 버튼을 스타일링에도 불구하고 그것은 border:none을 선택하지 않을 것하지만 일을하는과 같이 입력 버튼을 직접 스타일을 추가했다 :

<div style="text-align:center;"> 
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" /> 
</div> 
+0

CSS 캐스케이드를 사용하여 속성을 인라인 스타일로 재정의합니다. CSS 캐스케이드 및 CSS 특이성에 대한 몇 가지 기사를 확인해야합니다. – DrCord

15

이것은 완벽하게 작동하는 것 같습니다.

button:focus { outline: none; } 
+1

'outline : none;'은 접근성을 이유로 권장되지 않습니다. 포커스 테두리를 제거해야하는 경우 사용자에게 포커스 테두리가 있음을 알리는 다른 방법을 제공하십시오. http://outlinenone.com/ – Vestride