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

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

---

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

.btn:focus {
  outline: none;
}

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

---

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

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

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

---

최신 버전의 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>

---

이것은 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;
}

---

아래 코드를보십시오

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

---

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

 <!--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);
}

---

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

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

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

---

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

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

---

I opted to simply remove the border width on :focus. This removes the ugly space between the outline and the button's rounded corners. For some reason this issue only happens on actual button elements and not <a class="btn"> elements.

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

---

This may help if someone still has this question unresolved.

(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>

---

Here's my Boostrap 4 solution to remove the button outline

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

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

---

I just had the same issue and the following code worked for me:

.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>

Hoping it will help!

---

a:focus {
  outline: none;
}

this works for me on BS3

---

This one worked for me in Bootstrap 4:

.btn {border-color: transparent;}

---

Actually in bootstrap is defined all variables for all cases. In your case you just have to override default variable '$input-btn-focus-box-shadow' from '_variables.scss' file. Like so: $input-btn-focus-box-shadow: none; Note that you need to override that variable in your own custom '_yourCusomVarsFile.scss'. And that file should be import in project in first order and then bootstrap like so:

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

The bootstraps vars goes with flag '!default'.

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

So in your file, you will override default values. Here the illustration:

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

The very first var have more priority then second one. The same is for the rest states and cases. Hope it will help you.

Here is '_variable.scss' file from repo, where you can find all initials values from bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

---

Keep in mind, if you're button is inside of an anchor like:

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

Adding the style to the button itself may not be enough, you may need to add the a:focus, a:active { outline: none } CSS rules where appropriate (this worked for me).

---

Try the below

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

---

Sometimes {outline: 0} didn't solve the problem and we can try {box-shadow: none;}

---

I'm using bootstrap 4, you can use outline and box-shadow.

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

Or if the button is inside an element like a div without back-ground, box-shadow is enough.

#buttonId {
     box-shadow: none;
}

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

---

If you are using version 4.3 or higher, your code will not work properly. This is what I used. It worked for me.

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

---

Here's a non-CSS method. Using JQuery, simply remove the "focus" class whenever the element is has been clicked.

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

This method may cause the border to flash into existence and then back out briefly, which doesn't look bad in my opinion (it looks like part of the response when the button is clicked).

The reason I used .mousemove() is that .click() and .mouseup() both proved to be ineffective.

---

Changing these values worked for me. I found it by looking at the Developer Tools of 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*/;
}

This retains the shadow of the button too, it only changes the color of the button on-click.

---

Override the exact bootstrap statements:

.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;
}

---

Instead to target on button class (.btn), here I target to button element itself and it works for me.

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

And can use shadow-none class for input field

---

Try

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

---

very simple :

.btn {outline: none;}

참고URL : https://stackoverflow.com/questions/23333231/bootstrap-button-shows-blue-outline-when-clicked