부트스트랩 버튼을 클릭하면 파란색 윤곽선이 표시됨
이것을 추가했는데 버튼을 클릭하면 파란색 윤곽이 나타납니다.
.btn:focus {
outline: none;
}
어떻게 그 못생긴 것을 제거합니까?
속성이 재정의될 수 있습니다.를 . !importantactive와 합니다.
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
또한 상자 그림자를 추가합니다. 그렇지 않으면 주위에 그림자 단추가 표시됩니다.
비록 이것이 사용하기에 좋은 관행은 아니지만!important 저는 당신이 좀 더 구체적인 클래스를 사용하고 나서 !important...를 사용하여 css를 적용하는 것을 제안합니다.
되어 있습니다.shadow-none사용 불가능으로 설정box-shadow(아닙니다.outline) (https://getbootstrap.com/docs/4.1/utilities/shadows/) .단추 그림자가 제거됩니다.
<button class='btn btn-primary shadow-none'>Example button</button>
업데이트: 부트스트랩 5: https://getbootstrap.com/docs/5.1/utilities/shadows/, 및 베타: https://getbootstrap.com/docs/5.2/utilities/shadows/ 의 문서 링크
최신 버전의 부트스트랩에서는 아웃라인을 제거하는 것 자체가 작동하지 않습니다.상자 그림자도 있기 때문에 이것을 추가해야 합니다.
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}
아래 코드로 시도
.button:active,
button:active,
.button:focus,
button:focus,
.button:hover,
button:hover{
border:none !important;
outline:none !important;
}
이것은 (파이어폭스는 아니지만) 크롬에서 저에게 일어나고 있었습니다.저는 그것을 알아냈습니다.outline속성이 부트스트랩에 의해 다음과 같이 설정되었습니다.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;
}
버튼을 클릭하면 버튼의 크기가 작아집니다.
4서는을 합니다.box-shadow: 0 0 0 0px rgba(0,123,255,0);▁with로 문제를 해결했습니다.
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);
}
사용해 보세요.
.btn
{
box-shadow: none;
outline: none;
}
모든 요소(버튼뿐만 아니라)에 대한 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;
}
}
}
다른 사용자가 이 문제를 해결하지 못한 경우 도움이 될 수 있습니다.
(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>방금 동일한 문제가 발생하여 다음 코드가 작동했습니다.
.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>도움이 되길 바랍니다!
적절한 중첩을 사용한 다음 스타일을 적용해야 합니다.
마우스 오른쪽 버튼을 클릭하고 (파이어버그를 사용한 Firebug 요소 검사), (크롬 요소 검사)를 사용하여 정확한 클래스 중첩을 찾습니다.
모든 클래스에 스타일을 추가합니다.그래야 효과가 있습니다.
저는 버튼 클릭 후에 이것이 제 경우에 꽤 유용하다는 것을 알았습니다.
$('#buttonId').blur();
의 테두리 너비를 제거하기로 선택했습니다.:focus이렇게 하면 윤곽선과 단추의 둥근 모서리 사이에 있는 보기 흉한 공간이 제거됩니다.어떤 이유에서인지 이 문제는 실제 버튼 요소에서만 발생하며 그렇지 않습니다.<a class="btn">요소들.
button.btn:focus {
border-width: 0;
}
은 씩끔가.{outline: 0}문제를 해결하지 못했고 우리는 시도할 수 있습니다.{box-shadow: none;}
버튼 아웃라인을 제거할 수 있는 Boostrap 4 솔루션이 있습니다.
/*
* Boostrap 4
* Remove blue outline from button
*/
.btn:focus,
.btn:active {
box-shadow: none;
}
실제로 부트스트랩에서는 모든 경우에 대해 모든 변수가 정의됩니다.이경기focus '$input-btn-btn-box-box-box' '_input' 에면됩니재하다정의를. filescss의.이와 같은 경우:$input-btn-focus-box-shadow: none;고유한 사용자 정의 '_yourCusomVarsFile.scss'에서 해당 변수를 재정의해야 합니다.그리고 이 파일은 프로젝트에서 첫 번째 순서로 가져온 다음 다음과 같이 부트스트랩해야 합니다.
@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";
부트스트랩 변수는 '!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;
첫 번째 변수가 두 번째 변수보다 더 많은 우선 순위를 가집니다.나머지 주와 사례도 마찬가지입니다.도움이 되길 바랍니다.
repo의 '_interial.scss' 파일은 부트스트랩의 모든 이니셜 값을 찾을 수 있습니다. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
치어스
값을 0으로 설정하여 버튼에서 아웃라인을 제거한 후에도 버튼을 클릭하면 여전히 이상한 동작이 발생하여 크기가 약간 축소됩니다.그래서 저는 최적의 솔루션을 생각해냈습니다.
.btn:focus {
outline: none !important;
box-shadow: 0 0 0 0;
}
이게 도움이 되길...
부트스트랩 버튼 클릭에 대한 테두리 초점을 피하는 방법:
.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
box-shadow: none;
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none;
}
부트스트랩 입력 필드의 클릭에 대한 경계 초점을 피하는 방법:
.form-control.focus, .form-control:focus {
outline: 0;
box-shadow: none;
}
이 방법이 특정 사례에 적용되지 않으면 검사자 페이지를 열고 선택 도구(왼쪽 상단 모서리의 상자에 있는 작은 화살표)를 클릭하여 편집하려는 요소를 클릭한 다음 동일한 요소를 다시 클릭하고 "스타일" 탭을 클릭하여 CSS 용어의 변경 사항을 확인하는 것이 좋습니다."포커스"와 관련된 것을 검색하면 CSS에서 덮어써야 하는 코드를 감지할 수 있습니다.이것이 도움이 되기를 바랍니다.
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;
}
저는 부트스트랩 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입력 필드 클래스
아래 답변을 _variable.scss 파일에 추가할 수 있습니다. 다른 개요를 변경하거나 변경할 필요가 없습니다.이것이 효과가 있을 거라고 확신합니다.
$btn-active-box-shadow: none !important;
확인란 및 라디오 단추의 경우
.form-check-input:checked ,.form-check-input:focus,.form-check-input:active {
outline: none !important;
box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
-webkit-box-shadow: none !important;
}
여기 비-CSS 방법이 있습니다.JQuery를 사용하면 요소를 클릭할 때마다 "초점" 클래스를 제거할 수 있습니다.
$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });
이 방법을 사용하면 테두리가 깜박였다가 잠시 꺼질 수 있는데, 제 생각에는 나쁘지 않은 것 같습니다(버튼을 클릭하면 응답의 일부처럼 보입니다).
.mousemove()를 사용한 이유는 .click()과 .mouseup() 둘 다 효과가 없기 때문입니다.
언급URL : https://stackoverflow.com/questions/23333231/bootstrap-button-shows-blue-outline-when-clicked
'programing' 카테고리의 다른 글
| C에서 "개인/제한된" 기능을 구현하는 방법은 무엇입니까? (0) | 2023.08.13 |
|---|---|
| Environment.getExternalStorageDirectory()가 API 수준 29 java에서 더 이상 사용되지 않습니다. (0) | 2023.08.13 |
| 판다 데이터 프레임에 하나 이상의 NaN 값이 있는 행 표시 (0) | 2023.08.13 |
| UI 텍스트 보기의 줄 수 제한 (0) | 2023.08.13 |
| Swagger API 응답에서 개체 목록 설정 (0) | 2023.08.13 |