How to remove focus around buttons on click

后端未结

关注

 30  917

遇见更好的自我

My buttons all have a highlight around them after I click them. This is in Chrome.

$\"Unselected\"$

相关标签:

30条回答

Happy的楠姐

2020-12-02 04:59

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

0 讨论(0)

囚心锁ツ

2020-12-02 05:00
You want something like:
```
<button class="btn btn-primary btn-block" onclick="this.blur();">...
```
The .blur() method correctly removes the focus highlighting and doesn't mess up Bootstraps's styles.
0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2020-12-02 05:00
If you use the rule :focus { outline: none; } to remove outlines, the link or control will be focusable but with no indication of focus for keyboard users. Methods to remove it such with JS like onfocus="blur()" are even worse and will result in keyboard users being unable to interact with the control.

The hacks you can use, that are sort of OK, includes adding :focus { outline: none; } rules when users interacts with the mouse and remove them again if keyboard interaction is detected. Lindsay Evans has made a lib for this: https://github.com/lindsayevans/outline.js

But i would prefer to setting a class on the html or body tag. And have control in the CSS file of when to use this.

For example (inline event handlers is for demonstration purposes only):
```
<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>
```
I did put togheter a Pen: http://codepen.io/snobojohan/pen/RWXXmp

But beware there are performance issues. This forces repaint every time the user switches between mouse and keyboard. More about Avoiding Unnecessary Paints http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
0 讨论(0)
发布评论:

提交评论
- 加载中...
猫巷女王i

2020-12-02 05:01
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
爱一瞬间的悲伤

2020-12-02 05:01
It is work, I hope help you
```
.btn:focus, .btn:focus:active {
    outline: none;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
借酒劲吻你

2020-12-02 05:02
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)
0 讨论(0)
发布评论:

提交评论
- 加载中...