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 · 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

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

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

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

Examples related to css