How do I remove blue "selected" outline on buttons?

Question

I have some buttons using <button>, which when clicked get a blue selected color!

Is there a way to remove this feature?

Bellbird

Try outline: none;. – Weald

Worked super! Thank you @Weald – Bellbird

I'd recommend using <a> as opposed to <button> as search engines will recognise them as links. – Auntie

Removing outline by setting it to none or 0 will solve this issue but might affect your website accessibility - Check this for detail stackoverflow.com/a/25298082 – Sunken

@Sunken - Would outline: transparent; work? It achieves the same "dont wanna see" effect, but is still present and invisible. – Sclerometer

Possible duplicate of Remove blue border from css custom-styled button in Chrome – Tamaru

@SteveVentimiglia No. The point of the outline is so that users that navigate the page with keyboards can understand which item they've landed on. If you remove the outline of a focused element, you should replace it with an alternative style that people can see that signifies the same thing. – Pleasure

Answer 1

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
}

Stat

Answer 2

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

Hylomorphism

Answer 3

You can remove this by adding !important to your outline.

button{
 outline: none !important;
}

Dithyrambic

By doing this you're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed. – Darton

Answer 4

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:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

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.

Darton