버튼에서 테두리 제거


109

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

버튼에서이 회색 테두리를 제거하는 방법을 아는 사람이 있습니까? 감사합니다.


시도 -webkit-appearance: inherit;또는-webkit-appearance:initial
Max

1
@Brut : 제가 틀렸을 수도 있지만, 브라우저에 따라 다르고 Jameson이 모든 최신 브라우저에서 작동하는 것을 원한다고 확신합니다.
Michael Scheper

답변:


185

더하다

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

버튼에.

데모:

https://jsfiddle.net/Vestride/dkr9b/


감사합니다.하지만 스타일 시트에 말씀하신대로 추가했는데 안타깝게도 작동하지 않았습니다. 차이가 나는 경우 html에 직접 삽입해야합니까?
JamesonW

background: none;버튼에 바이올린 플러스 를 추가했습니다 . 바이올린에서 정점을 찍고 그것이 당신에게 효과가 있는지 확인하십시오.
Vestride 2012

37

이것은 나를 위해 완벽하게 작동하는 것 같습니다.

button:focus { outline: none; }

4
outline:none;접근성을 위해 권장되지 않습니다. 포커스 테두리를 제거해야하는 경우 사용자가 포커스가 있음을 확인할 수있는 다른 방법을 제공하십시오. outlinenone.com
Vestride

9

나는 똑같은 문제가 있었고 CSS에서 내 버튼을 스타일링하더라도 결코 선택하지 border:none않았지만 효과가 있었던 것은 다음과 같이 입력 버튼에 직접 스타일을 추가하는 것입니다.

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

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


1

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

Jquery-UI 또는 Bootstrap과 같은 프레임 워크는이 작업을 즉시 수행합니다. 그중 하나를 사용하면 전체 응용 프로그램 개념을 많이 완화 할 수 있습니다.


1

background:none;border:0px버튼을 시도 할 수도 있습니다 .

또한 CSS 선택자는 div#yes button{..}div#no button{..}입니다. 도움이되기를 바랍니다


또한 당신은 이미지로 버튼 대신 IMG 태그를 사용하여 배경 설정할 수 있습니다

또는 순수한 CSS로 수행하십시오. 같은background:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

버튼 포커스의 버튼에서 기본 '파란색 테두리'를 제거하려면 :

HTML에서 :

<button class="new-button">New Button...</button>

그리고 CSS에서

button.new-button:focus {
    outline: none;
}

도움이되기를 바랍니다 :)



-3

$ ( ". myButtonClass"). css ([ "border : none; background-color : white; padding : 0"]);


3
롤 당신은 CSS 스타일 변화를 JQuery와 사용 야해
zardilior
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.