클릭시 버튼 주위의 초점을 제거하는 방법
버튼을 클릭하면 버튼 주위에 강조 표시가 나타납니다. 이것은 Chrome에 있습니다.
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
나는 주제와 함께 부트 스트랩을 사용하고 있지만 그것이 사실이 아니라고 확신합니다. 다른 프로젝트에서 전에 이것을 알았습니다.
<a>대신 태그를 사용하면 사라집니다 <button>. 왜? <button>어떻게 사용 하고 싶 습니까?
다른 페이지 에서이 Q와 A를 찾았고 버튼 포커스 스타일을 재정의하면 나에게 도움이되었습니다. 이 문제는 Chrome을 사용하는 MacOS에만 해당됩니다.
.btn:focus {
outline: none;
}
이것은 접근성에 영향을 미치며 버튼과 입력에 대해 일관된 초점 상태가 될 때까지 권장되지 않습니다. 아래 의견에 따르면, 마우스를 사용할 수없는 사용자가 있습니다.
당신은 다음과 같은 것을 원합니다 :
<button class="btn btn-primary btn-block" onclick="this.blur();">...
.blur () 메서드는 포커스 강조 표시를 올바르게 제거하고 Bootstraps 스타일을 망치지 않습니다.
나의 이해는 초점 먼저 다음 적용되는 것입니다 onMouseDown때문에 호출 이벤트 e.preventDefault()에서 onMouseDown필요에 따라 깨끗한 해결책이 될 수 있습니다. 이것은 접근하기 쉬운 솔루션이지만 웹 프로젝트와 호환되지 않을 수있는 마우스 클릭 동작을 조정합니다.
현재이 솔루션 ( react-bootstrap프로젝트 내 )을 사용하고 있으며 클릭 후 포커스 깜박임이나 버튼의 포커스를받지 못하지만 여전히 포커스를 탭하고 동일한 버튼의 포커스를 시각적으로 시각화 할 수 있습니다.
모든 초점이 맞춰진 버튼의 윤곽선을 제거하는 것은 쉽지만 (user1933897의 답변 에서와 같이) 접근성 관점에서 그 해결책은 좋지 않습니다 (예 : 브라우저의 기본 초점 윤곽선으로 메시지 중지 중지 참조 )
반면에 클릭 한 버튼이 클릭 한 후 초점이 맞춰 졌다고 생각되면 클릭 한 버튼의 스타일을 중지하도록 브라우저를 설득하는 것이 불가능할 수도 있습니다 (OS X의 Chrome을보고 있습니다).
그래서 우리가 뭘 할 수 있지? 몇 가지 옵션이 떠 오릅니다.
1) 자바 스크립트 (jQuery) : $('.btn').mouseup(function() { this.blur() })
버튼을 클릭 한 직후 버튼 주위의 포커스를 제거하도록 브라우저에 지시하고 있습니다 . 사용하여 mouseup대신 click우리가 키보드 기반의 상호 작용의 기본 동작을 유지하고 ( mouseup키보드에 의해 트리거되지 않습니다).
2) CSS : .btn:hover { outline: 0 !important }
여기에서 호버 된 단추에 대해서만 윤곽선을 끕니다 . 분명히 이상적이지는 않지만 일부 상황에서는 충분할 수 있습니다.
아무도이 글을 아직 게시하지 않았다고 믿을 수 없습니다.
버튼 대신 레이블을 사용하십시오.
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
이것은 언급되지 않은 또 다른 해결책입니다. 클릭 이벤트에서 그냥 던져 ...
$(this).trigger("blur");
또는 다른 이벤트 / 방법에서 전화하십시오 ...
$(".btn_name").trigger("blur");
규칙 :focus { outline: none; }을 사용하여 윤곽선을 제거하면 링크 나 컨트롤에 초점을 맞출 수 있지만 키보드 사용자에게는 초점이 표시되지 않습니다. JS와 같이 그것을 제거하는 방법 onfocus="blur()"은 더 나 빠지고 키보드 사용자가 컨트롤과 상호 작용할 수 없게됩니다.
사용할 수있는 해킹은 일종의 OK 이며 :focus { outline: none; }사용자가 마우스와 상호 작용할 때 규칙을 추가 하고 키보드 상호 작용이 감지되면 다시 제거합니다. Lindsay Evans 는이를 위해 lib를 만들었습니다 : https://github.com/lindsayevans/outline.js
그러나 html 또는 body 태그에서 클래스를 설정하는 것을 선호합니다. 그리고 이것을 언제 사용할 것인지 CSS 파일을 제어하십시오.
예를 들어 (인라인 이벤트 핸들러는 데모 용입니다) :
<html>
<head>
<style>
a:focus, button:focus {
outline: 3px solid #000;
}
.no-focus a, .no-focus button {
outline: none;
}
</style>
</head>
<body id="thebody"
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
<p>This her is <a href="#">a link</a></p>
<button>Click me</button>
</body>
</html>
나는 togheter에게 펜을 넣었다 : http://codepen.io/snobojohan/pen/RWXXmp
그러나 성능 문제가 있음을주의하십시오. 이것은 사용자가 마우스와 키보드 사이를 전환 할 때마다 강제로 다시 칠합니다. 불필요한 페인트 피하기에 대한 추가 정보 http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
이것은 나를 위해 일했습니다. 필요한 CSS를 재정의하는 사용자 정의 클래스를 만들었습니다.
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-webkit-box-shadow는 Chrome 및 Safari 브라우저에서 작동합니다.
나는 똑같은 것을 보았고 그것이 실제로 성가 시지만 이것을 처리하는 적절한 방법이 없다고 생각합니다.
버튼의 접근성을 완전히 없애기 때문에 주어진 다른 모든 솔루션에 대해 권장합니다. 이제 버튼을 탭하면 예상되는 초점을 얻지 못합니다.
이것은 피해야합니다!
.btn:focus {
outline: none;
}
Late, but who knows it may help someone. The CSS would look like:
.rhighlight{
outline: none !important;
box-shadow:none
}
The HTML would look like:
<button type="button" class="btn btn-primary rHighlight">Text</button>
This way you can keep btn and it's associated behaviors.
I find a solution. when we focus, bootstrap use box-shadow, so we just disable it(not enough reputation, cannot upload image :( ).
I add
.btn:focus{
box-shadow:none !important;
}
it works.
If the above doesn't work for you, try this:
.btn:focus {outline: none;box-shadow: none;border:2px solid transparent;}
As user1933897 pointed out, this might be specific to MacOS with Chrome.
I mentioned this in a comment above, but it's worth listing as a separate answer for clarity. As long as you don't need to ever actually have focus on the button, you can use the focus event to remove it before it can apply any CSS effects:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
This avoids the flicker that can be seen when using the click event. This does restrict the interface, and you won't be able to tab to the button, but that isn't a problem in all applications.
Style
.not-focusable:focus {
outline: none;
box-shadow: none;
}
Using
<button class="btn btn-primary not-focusable">My Button</button>
We were suffering a similar problem and noticed that Bootstrap 3 doesn't have the problem on their tabs (in Chrome). It looks like they're using outline-style which allows the browser to decide what best to do and Chrome seems to do what you want: show the outline when focused unless you just clicked the element.
Support for outline-style is hard to pin down since the browser gets to decide what that means. Best to check in a few browsers and have a fall-back rule.
Another possible solution is to add a class using a Javascript listener when the user clicks on the button and then remove that class on focus with another listener. This maintains accessibility (visible tabbing) while also preventing Chrome's quirky behaviour of considering a button focused when clicked.
JS:
$('button').click(function(){
$(this).addClass('clicked');
});
$('button').focus(function(){
$(this).removeClass('clicked');
});
CSS:
button:focus {
outline: 1px dotted #000;
}
button.clicked {
outline: none;
}
Full example here: https://jsfiddle.net/4bbb37fh/
Try this solution for remove border around the button. Add this code in css.
Try
button:focus{
outline:0px;
}
If not works then use below.
button:focus{
outline:none !important;
}
It is work, I hope help you
.btn:focus, .btn:focus:active {
outline: none;
}
This works best
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
Add this in CSS:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
For people wanting a pure css way to do that:
:focus:not(:focus-visible) { outline: none }
This could also work for link and so on, and bonus, it keeps the keyboard accessibilities. Lastly it is ignored by browsers that don’t support :focus-visible
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
this outline:none will work for both button and a tag
.btn:focus:active {
outline: none;
}
this removes the outline on click, but keeps the focus when tabbing (for a11y)
I just had this same problem on MacOS and Chrome while using a button to trigger a "transition" event. If anyone reading this is already using an event listener, you can solve it by calling .blur() after your actions.
Example:
nextQuestionButtonEl.click(function(){
if (isQuestionAnswered()) {
currentQuestion++;
changeQuestion();
} else {
toggleNotification("invalidForm");
}
this.blur();
});
Though if you're not using an event listener already, adding one just to solve this might add unnecessary overhead and a styling solution like previous answers provide is better.
You can set tabIndex="-1". It will make browser to skip this button when you TAB through focusable controls.
Other "fixes" suggested here, only remove focus outline, but still leaves buttons tabable. However, from usability point of view, you already removed glow, so your user won't know what is currently focused button, any way.
On other hand, making button non-tabable have accessibility implications.
I'm using it to remove focus outline from X button in bootstrap modal, which have duplicate "Close" button at the bottom any way, so my solution have no impact on accessibility.
If you're using a webkit browser (and potentially a browser compatible with webkit vendor prefixing), that outline belongs to the button's -webkit-focus-ring pseudoclass. Simply set it's outline to none:
*:-webkit-focus-ring {
outline: none;
}
Chrome is such a webkit browser, and this effect happens on Linux too (not just a macOS thing, although some Chrome styles are macOS only)
I was having the same problem using <a> acting as button and I discovered I was missing a workaround by adding attr type="button" makes it behave normally for me at least.
<a type="button" class="btn btn-primary">Release Me!</a>
directly in html tag (in a scenario where you might want to leave the bootstrap theme in place elsewhere in your design)..
examples to try..
<button style="border: transparent;">
<button style="border: 1px solid black;">
..ect,. depending on the desired effect.
Simply add outline:0; css to elements.
If you dont want the outline for button with all the status, you can override the css with below code
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus{
outline: none;
}
참고URL : https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click
'Programming' 카테고리의 다른 글
| strftime을 사용하여 Python datetime을 epoch로 변환 (0) | 2020.05.17 |
|---|---|
| 부트 스트랩 모달에서 특정 필드의 포커스를 설정하는 방법 (0) | 2020.05.17 |
| Visual C ++에서 콘솔 창을 열어 두는 방법은 무엇입니까? (0) | 2020.05.17 |
| 일반 영어로 된 "웹 서비스"란 무엇입니까? (0) | 2020.05.17 |
| JSP로 URL에서 매개 변수를 얻는 방법 (0) | 2020.05.17 |