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?

Removing outline by setting it to none or 0 will solve this issue but might affect your website accessibility - Check this for detail http://stackoverflow.com/a/25298082 — chetang, Dec 28 '16 at 11:15
@chetang - Would `outline: transparent;` work? It achieves the same "dont wanna see" effect, but is still present and invisible. — Steven Ventimiglia, May 25 '17 at 17:19
Possible duplicate of [Remove blue border from css custom-styled button in Chrome](https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome) — user, Jun 29 '17 at 08:47
@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. — aminimalanimal, Sep 18 '17 at 02:49

score 106 · Accepted Answer · answered Dec 15 '13 at 09:57

106

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
}

answered Dec 15 '13 at 09:57

Afzaal Ahmad Zeeshan

15,669
12
55
103

score 13 · Answer 2 · edited Dec 15 '13 at 10:07

13

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

edited Dec 15 '13 at 10:07

Afzaal Ahmad Zeeshan

15,669
12
55
103

answered Dec 15 '13 at 10:01

Sam

1,401
3
26
53

score 6 · Answer 3 · answered May 04 '17 at 02:57

6

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

button{
 outline: none !important;
}

answered May 04 '17 at 02:57

Justin Cedeno

71
1
1

By doing this you're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed. – alexrogers Aug 07 '19 at 15:26

score 3 · Answer 4 · edited Nov 11 '18 at 12:14

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.

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

4 Answers4

Linked

Related