How to remove focus around buttons on click

Question

My buttons all have a highlight around them after I click them  This is in Chrome       lt button class  btn btn-primary btn-block  gt       lt span class  icon-plus  gt  lt  span gt  Add Page  lt  button gt    I am using Bootstrap with a theme  but I m pretty sure that s not it  I was noticing this before on another project    It goes away if I use an  lt a gt  tag instead of  lt button gt   Why  If I wanted to use  lt button gt  how would I make it go away

User · Answer

Can t believe nobody has posted this yet   Use a label instead of a button    lt label type  button  class  btn btn-primary btn-block  gt   lt span class  icon-plus  gt  lt  span gt  Add Page  lt  label gt    Fiddle

User · Answer

I ve noticed the same and even though it really annoys me  I believe there is no proper way of handling this   I would recommend against all the other solutions given because they kill the accessibility of the button completely  so now  when you tab to the button  you won t get the expected focus   This should be avoided    btn focus     outline  none

User · Answer

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     lt button style  border  transparent   gt     lt button style  border  1px solid black   gt      ect   depending on the desired effect

User · Answer

For AngularJS developers I use from the solution   var element    window document getElementById  export-button        if  element           element blur            Remember to inject  window

User · Answer

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

User · Answer

Although it s easy to just remove outline for all focused buttons  as in user1933897 s answer   but that solution is bad from the accessibility point of view  for example  see Stop Messing with the Browser s Default Focus outline   On the other hand  it s probably impossible to convince your browser to stop styling your clicked button as focused if it thinks that it s focused after you clicked on it  I m looking at you  Chrome on OS X    So  what can we do  A couple options come to my mind   1  Javascript  jQuery       btn   mouseup function     this blur       You re instructing your browser to remove the focus around any button immediately after the button is clicked  By using mouseup instead of click we re keeping the default behavior for keyboard-based interactions  mouseup doesn t get triggered by keyboard    2  CSS   btn hover   outline  0  important    Here you turn off outline for hovered buttons only  Obviously it s not ideal  but may be enough in some situations

User · Answer

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

User · Answer

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

User · Answer

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     lt html gt   lt head gt   lt style gt    a focus  button focus       outline  3px solid  000         no-focus a   no-focus button       outline  none        lt  style gt   lt  head gt   lt body id  thebody   onmousedown  document getElementById  thebody   classList add  no-focus     onkeydown  document getElementById  thebody   classList remove  no-focus     gt       lt p gt This her is  lt a href     gt a link lt  a gt  lt  p gt          lt button gt Click me lt  button gt   lt  body gt   lt  html gt    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

User · Answer

I found this Q and A on another page  and overriding the button focus style worked for me  This problem may be specific to MacOS with Chrome    btn focus     outline  none    box-shadow  none      Note though that this has implications for accessibility and isn t advised until you have a good consistent focus state for your buttons and inputs  As per the comments below  there are users out there who cannot use mice

User · Answer

This works best   btn-primary focus   btn-primary focus   -webkit-box-shadow  none important  box-shadow  none important

User · Answer

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

User · Answer

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

User · Answer

btn focus  btn active  a          outline  none  important          box-shadow  none           this outline none will work for both button and a tag

User · Answer

I found a solution simply add below line in your css code   button focus   outline  none

User · Answer

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

User · Answer

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

User · Answer

Add this in script      document  ready function             addBtn   focus function             this blur

User · Answer

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

User · Answer

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    lt button type  button  class  btn btn-primary rHighlight  gt Text lt  button gt     This way you can keep btn and it s associated behaviors

User · Answer

For sass users  Bootstrap 4 should be manipulated by overriding variables   If you want to disable the box-shadow on focus around buttons    btn-focus-box-shadow  none    You can also disable the box-shadow on focus around inputs with    input-focus-box-shadow  none    Or both with one variable    input-btn-focus-box-shadow  none

User · Answer

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

User · Answer

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

User · Answer

You can use focus event of button  This worked in case of angular   lt button  focus  false  gt Click lt  button

User · Answer

Style   not-focusable focus       outline  none      box-shadow  none      Using   lt button class  btn btn-primary not-focusable  gt My Button lt  button gt

User · Answer

OPTION 1  Use the  focus-visible pseudo-class The  focus-visible pseudo-class can be used to kill the unsightly outlines and focus rings on buttons and various elements for users that are NOT navigating via keyboard  i e   via touch or mouse click           The default focus style is likely provided by Bootstrap or the browser    but here we override everything else with a visually appealing cross-    browser solution that works well on all focusable page elements    including buttons  links  inputs  textareas  and selects        focus      outline  0  important    box-shadow      0 0 0  2rem  fff     use site bg color to create whitespace for faux focus ring        0 0 0  35rem  069  important     faux focus ring color              Undo the above focused button styles when the element received focus    via mouse click or touch  but not keyboard navigation        focus not  focus-visible      outline  0  important    box-shadow  none  important      Warning  As of 2020  the  focus-visible pseudo-class is not widely supported across browsers  However the polyfill is very easy to use  see instructions below    OPTION 2  Use the  focus-visible polyfill This solution uses a normal CSS class instead of the pseudo-class mentioned above  and has wide browser support because it is an official Javascript-based polyfill  Step 1  Add the Javascript dependencies to your HTML page Note  the focus-visible polyfill requires an additional polyfill for several older browsers that don t support classList   lt  -- place this code just before the closing  lt  html gt  tag -- gt   lt script src  quot https   cdn polyfill io v2 polyfill js features Element prototype classList quot  gt  lt  script gt   lt script src  quot https   unpkg com focus-visible quot  gt  lt  script gt   Step 2  Add the following CSS to your stylesheet The following is a modified version of the CSS solution documented more thoroughly above         Custom cross-browser styles for keyboard  focus overrides defaults        focus      outline  0  important    box-shadow      0 0 0  2rem  fff      0 0 0  35rem  069  important            Remove focus styles for non-keyboard  focus        focus not  focus-visible      outline  0  important    box-shadow  none  important     Step 3  optional   use  focus-visible  class where necessary If you have any items where you actually do want to show the focus ring when someone clicks or uses touch  then just add the focus-visible class to the DOM element   lt  -- This example uses Bootstrap classes to theme a button to appear like      a regular link  and then add a focus ring when the link is clicked --- gt   lt button type  quot button quot  class  quot btn btn-text focus-visible quot  gt    Clicking me shows a focus box  lt  button gt   A note about accessibility Removing all focus rings a la  focus   outline  none    or  focus   outline  0    is a known accessibility issue and is never recommended  Additionally  there are folks in the accessibility community who would rather you never remove a focus ring outline and instead make everything have a  focus style     either outline or box-shadow could be valid if styled appropriately  Finally  some folks in the accessibility community believe developers should not implement  focus-visible on their websites until all browsers implement and expose a user preference which lets people pick whether all items should be focusable or not  I personally don t subscribe to this thinking  which is why I provided this solution that I feel is far better than the harmful  focus   outline none    I think  focus-visible is a happy medium between design concerns and accessibility concerns  Resource   https   css-tricks com keyboard-only-focus-styles   Demo   https   wicg github io focus-visible demo

User · Answer

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

User · Answer

It is work  I hope help you   btn focus   btn focus active       outline  none

User · Answer

You want something like    lt button class  btn btn-primary btn-block  onclick  this blur     gt       The  blur   method correctly removes the focus highlighting and doesn t mess up Bootstraps s styles

User · Answer

This worked for me   I created a custom class which overrides the necessary CSS     custom-button focus       outline  none  important      border  none  important      -webkit-box-shadow  none  important      box-shadow  none  important        The -webkit-box-shadow will work for Chrome and safari browsers

User · Answer

my understanding is that the focus is first applied following the onMouseDown event  so calling e preventDefault   in onMouseDown may be a clean solution depending on your needs  This is certainly an accessibility friendly solution  but obviously it adjusts the behaviour of mouse clicks which may not be compatible with your web project   I am currently using this solution  within a react-bootstrap project  and I do not receive a focus flicker or retained focus of buttons after a click  but I am still able to tab my focus and visually visualize the focus of the same buttons

User · Answer

I found no solid answers that didn t either break accessibility or subvert functionality   Perhaps combining a few will work better overall    lt h1   onmousedown  this style outline  none      onclick  this blur    runFn this      onmouseup  this style outline null    gt Hello lt  h1 gt    function runFn thisElem    console log  Hello     thisElem

User · Answer

This works for me  another solution not mentioned   Just throw it in the click event       this  trigger  blur      Or call it from another event method         btn name   trigger  blur

User · Answer

Simply add outline 0  css to elements

User · Answer

Here are two possible solutions   1   button type  button  className  btn-cart onClick  event   gt this blur event    2   button type  button  className  btn-cart  onclick  this blur   Both of the solutions will remove the highlighted part around the button i e -  blur   has its own specification in it of removing highlighted part around

User · Answer

btn focus active     outline  none      this removes the outline on click  but keeps the focus when tabbing  for a11y

User · Answer

I was having the same problem using  lt a gt  acting as button and I discovered I was missing a workaround by adding attr type  button  makes it behave normally for me at least    lt a type  button  class  btn btn-primary  gt Release Me  lt  a gt

User · Answer

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

[html] How to remove focus around buttons on click

Examples related to html

Examples related to css

Examples related to twitter-bootstrap