부트 스트랩 버튼을 클릭하면 파란색 윤곽선이 표시됩니다

이것을 추가했지만 버튼을 클릭하면 여전히 파란색 윤곽선이 나타납니다.

.btn:focus {
  outline: none;
}

그 못생긴 것을 제거하는 방법?

속성이 재정의 될 수 있습니다. !important: active와 함께 코드에 첨부 하십시오.

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

그렇지 않으면 여전히 상자 주위에 그림자가 표시되므로 상자 그림자를 추가하십시오.

! important를 사용하는 것이 좋지는 않지만 더 구체적인 클래스를 사용하고! important를 사용하여 CSS를 적용하는 것이 좋습니다 ...

최신 버전의 Bootstrap에서 아웃 라인 자체를 제거해도 작동하지 않습니다. 그리고 상자 그림자가 있기 때문에 이것을 추가해야합니다.

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

shadow-none비활성화 box-shadow(사용 안함 outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ )를 위한 내장 boostrap 클래스 가 있습니다. 버튼의 그림자가 제거됩니다.

<button class='btn btn-primary shadow-none'>Example button</button>

아래 코드를보십시오

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

이것은 Chrome에서 나에게 일어난 일입니다 (Firefox는 아니지만). outline속성이 Bootstrap에 의해로 설정되고 있음을 알았습니다 outline: 5px auto -webkit-focus-ring-color;. outline나중에 다음과 같이 사용자 정의 CSS에서 속성 을 재정 의하여 해결했습니다 .

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

이것은 텍스트가있는 버튼을 해결하고, 버튼 만 아이콘 또는 버튼이 링크입니다.

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

추가하면 border:none !important;

{
    border:none !important;
    outline:none !important;
}

클릭하면 버튼의 크기가 작아집니다.

이 시도

.btn
{
    box-shadow: none;
    outline: none;
}

Bootstrap 4에서 그들은 box-shadow: 0 0 0 0px rgba(0,123,255,0);: focus에서 사용 합니다.

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

값을 0으로 설정하여 버튼에서 외곽선을 제거한 후에도 버튼을 클릭했을 때 재미있는 동작이 있지만 크기가 약간 줄어 듭니다. 그래서 최적의 솔루션을 생각해 냈습니다.

.btn:focus {
   outline: none !important;
   box-shadow: 0 0 0 0;
}

도움이 되었기를 바랍니다...

적절한 중첩을 사용한 다음 스타일을 적용해야합니다.

• 버튼을 마우스 오른쪽 버튼으로 클릭하고 (firefox의 경우 firebug를 사용하여 요소 검사), (chrome의 요소 검사)를 사용하여 정확한 클래스 중첩을 찾으십시오.

• 수업 전체에 스타일을 추가하십시오. 그런 다음에 만 작동합니다

버튼 클릭 후 내 경우에 이것이 매우 유용하다는 것을 알았습니다.

$('#buttonId').blur();

에서 테두리 너비를 간단히 제거하기로 선택했습니다 :focus. 그러면 윤곽선과 버튼의 둥근 모서리 사이의 추악한 공간이 제거됩니다. 어떤 이유로이 문제는 요소가 아닌 실제 단추 요소에서만 발생 <a class="btn">합니다.

button.btn:focus {
  border-width: 0;
}

누군가 여전히이 질문을 해결하지 못한 경우 도움이 될 수 있습니다.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

다음은 버튼 개요를 제거하는 Boostrap 4 솔루션입니다.

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

방금 동일한 문제가 있었고 다음 코드가 나를 위해 일했습니다.

.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
    outline: none !important;
}

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

도움이되기를 바랍니다!

실제로 부트 스트랩에는 모든 경우에 대한 모든 변수가 정의되어 있습니다. 귀하의 경우 '_variables.scss'파일에서 기본 변수 '$ input-btn-focus-box-shadow'를 재정의해야합니다. 이와 같이 : $input-btn-focus-box-shadow: none; 사용자 정의 '_yourCusomVarsFile.scss'에서 해당 변수를 대체해야합니다. 그리고 그 파일은 프로젝트에서 첫 번째 순서로 가져온 다음 부트 스트랩이어야합니다.

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

부트 스트랩 vars는 플래그 '! default'와 함께갑니다.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

따라서 파일에서 기본값을 재정의합니다. 여기 그림이 있습니다 :

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

첫 번째 변수는 두 번째 변수보다 우선 순위가 높습니다. 나머지 상태와 경우도 마찬가지입니다. 그것이 도움이되기를 바랍니다.

다음은 저장소의 '_variable.scss'파일이며 부트 스트랩에서 모든 이니셜 값을 찾을 수 있습니다. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

건배

a:focus {
  outline: none;
}

이것은 BS3에서 나를 위해 작동합니다

이것은 부트 스트랩 4에서 나를 위해 일했습니다.

.btn {border-color: transparent;}

시험

.btn-primary:focus { 
  box-shadow: none !important; 
}

버튼이 앵커 안에 있으면 다음과 같이 명심하십시오.

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

버튼 자체에 스타일을 추가하는 것만으로는 충분하지 않을 수 있으며, a:focus, a:active { outline: none }적절한 경우 CSS 규칙 을 추가해야 할 수도 있습니다 (이것이 저에게 효과적이었습니다).

아래를 시도하십시오

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

때때로 {outline: 0}문제가 해결되지 않아서 시도해 볼 수 있습니다{box-shadow: none;}

부트 스트랩 4를 사용하고 있으며 개요 및 상자 그림자를 사용할 수 있습니다.

#buttonId {
    box-shadow: none;
    outline: none;
}

또는 버튼이 배경이없는 div와 같은 요소 안에 있으면 상자 그림자로 충분합니다.

#buttonId {
     box-shadow: none;
}

예 : https://codepen.io/techednelson/pen/XRwgRB

버전 4.3 이상을 사용하는 경우 코드가 제대로 작동하지 않습니다. 이것이 내가 사용한 것입니다. 그것은 나를 위해 일했다.

.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

버튼 클래스 ( .btn ) 를 대상으로하는 대신 버튼 요소 자체를 대상으로 하고 나를 위해 작동합니다.

        button:focus {
          outline:none !important;
          box-shadow:none !important;
        }

shadow-none입력 필드에 클래스를 사용할 수 있습니다

CSS가 아닌 방법이 있습니다. JQuery를 사용하면 요소를 클릭 할 때마다 "포커스"클래스를 제거하면됩니다.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

이 방법을 사용하면 테두리가 깜박 인 다음 잠시 후에 다시 나타날 수 있습니다. 버튼을 클릭하면 응답의 일부처럼 보입니다.

.mousemove ()를 사용한 이유는 .click ()과 .mouseup ()이 모두 효과가없는 것으로 판명 되었기 때문입니다.

이 값을 변경하면 나에게 도움이되었습니다. Chrome 개발자 도구를보고 찾았습니다.

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

이렇게하면 버튼의 그림자도 유지되고 클릭시 버튼의 색상 만 변경됩니다.

정확한 부트 스트랩 문을 재정의하십시오.

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

테두리 색을 다시 회색으로 변경

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

버튼뿐만 아니라 모든 요소에 대한 SCSS 방식 :

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}