How do I remove blue selected outline on buttons

Question

I have some buttons using  lt button gt   which when clicked get a blue selected color   Is there a way to remove this feature

User · Accepted Answer

That is a default behaviour of each browser  your browser seems to be Safari  in Google Chrome it is orange in color   Use this to remove this effect    button     outline  none     this one

User · Answer

This is an issue in the Chrome family and has been there forever    A bug has been raised https   bugs chromium org p chromium issues detail id 904208  It can be shown here  https   codepen io anon pen Jedvwj as soon as you add a border to anything button-like  say role  button  has been added to a tag for example  Chrome messes up and sets the focus state when you click with your mouse  You should see that outline only on keyboard tab-press    I highly recommend using this fix  https   github com wicg focus-visible   Just do the following  npm install --save focus-visible   Add the script to your html    lt script src   node modules focus-visible dist focus-visible min js  gt  lt  script gt    or import into your main entry file if using webpack or something similar   import  focus-visible dist focus-visible min     then put this in your css file      hide the focus indicator if element receives focus via mouse  but show on keyboard focus  on tab    js-focus-visible  focus not  focus-visible      outline  none        Define a strong focus indicator for keyboard focus     If you skip this then the browser s default focus indicator will display instead    ideally use outline property for those users using windows high contrast mode  js-focus-visible  focus-visible     outline  magenta auto 5px      You can just set   button focus  outline 0     but if you have a large number of users  you re disadvantaging those who cannot use mice or those who just want to use their keyboard for speed

User · Answer

You can remove this by adding  important to your outline    button   outline  none  important

User · Answer

You can remove the blue outline by using outline  none    However  I would highly recommend styling your focus states too  This is to help users who are visually impaired    Check out  http   www w3 org TR 2008 REC-WCAG20-20081211  navigation-mechanisms-focus-visible  More reading here  http   outlinenone com

[css] How do I remove blue "selected" outline on buttons?

Examples related to css