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

Program / 글쓴이

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

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