941

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an annoying blue border around it. I thought button:active { outline: none } or button:focus { outline:none } would work, but neither do. Any ideas?

This is what it looks like before being clicked (and how I want it to still look after being clicked):

And this is the border I'm talking about:

enter image description here

Here is my CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}
6
  • 28
    You shouldn't remove the outline completely - those with disabilities - and those like me who often use the keyboard because it's fast - need it to navigate. It'd be much better to re-style the outline to something you like.
    – Chris B
    Aug 26, 2014 at 18:39
  • Keep button:focus border style or keyboard users will not know the button is selected.
    – R1CHY_RICH
    Jul 11, 2017 at 4:00
  • I found this excellent article which summarize everything hackernoon.com/…
    – Offirmo
    Aug 12, 2018 at 20:48
  • Unfortunately there is an issue in Chrome where the blue outline shows and stays visible on click. Other browsers by default just show it on keyboard tab. This answer has a fix so you only see it when using the keyboard: stackoverflow.com/a/50570972/3564402 Don't listen to anybody saying to switch it off for everything. They're harming users who can't use mice (squeeek)
    – alexrogers
    Oct 27, 2018 at 20:22
  • 3
    Please don't set outline: none like this unless you are ready to replace the loss in accessibility. See this website: outlinenone.com
    – Flimm
    May 29, 2019 at 14:09

24 Answers 24

1744

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

10
  • 54
    Shouldn't this actually be outline: none; or doesn't that matter? Aug 7, 2014 at 20:42
  • 2
    @henrywright Well, the OP tried that and didn't worked for him.
    – Diosney
    Jul 13, 2015 at 20:27
  • 63
    Please never do this. Your minor grievance is irrelevant to the massive accessibility issue this becomes
    – phazei
    Apr 28, 2016 at 17:59
  • 27
    You should definitely re-style this instead of hiding it completely. In this case, try something like button:focus{ outline-color: #A75000 } … instead of hiding the indicator you change it to a dark orange that fits the style.
    – cloudworks
    May 10, 2016 at 17:57
  • 6
    @SeanO'Brien granted the OP's given situation might be for a site that has 5 users, all able bodied. But probably the majority of the 1123 people who have upvoted this think this is the right way to do things for their given situation but actually it isn't as it's discriminatory.
    – alexrogers
    Nov 10, 2018 at 14:25
319

Wait! There's a reason for that ugly outline!

Before removing that ugly blue outline, you may want to take accessibility into consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you should replace it with another type of visual indication that the button is focused.

Possible Solution: Darken Buttons when focused

For the examples below, Chrome's blue outline was first removed by using button:focus { outline:0 !important; }

Here are your basic Bootstrap buttons as they appear normally: Bootstrap Buttons in Normal State

Here are the buttons when they receive focus: Bootstrap Buttons in Focused State

Here the buttons when they are pressed: enter image description here

As you can see, the buttons are a little darker when they receive focus. Personally, I would recommend making the focused buttons even darker so that there is a very noticeable difference between the focused state and the normal state of the button.

It's not just for disabled users

Making your site more accessible is something that is often overlooked but can help create a more productive experience in your website. There are many normal users that use keyboard commands to navigate through websites in order to keep hands on the keyboard.

5
  • 44
    The issue is in Chrome it happens even on click rather than just tabbing (the logical implementation found in most browsers). So actually Google is reducing accessibility as most devs will simply turn this off (in Chrome) More time wasted in researching/fixing issues related to Google/Chrome (password saving, email css support, this)
    – RunLoop
    Mar 2, 2015 at 10:08
  • 3
    You right! To take accessibility in account when removing outline, you need a bit of JavaScript: paciellogroup.com/blog/2012/04/…
    – mems
    Oct 23, 2015 at 8:13
  • you can't even style/format a comment in the way that you can an answer, tho. hard to provide feedback at this level of detail solely via a comment.
    – A-Dubb
    Jun 7, 2016 at 11:34
  • @RunLoop How do you remove or change the blue border after the click? Can it be done via CSS or is Javascript required?
    – Nick
    Apr 7, 2018 at 18:01
  • people with those issues can simply use vimium-ff Feb 26, 2019 at 12:15
73

In my instance of this problem I had to specify box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}
4
  • 6
    Thanks for your post! The "box-shadow" property was the point in my case.
    – Nightking
    May 18, 2017 at 11:31
  • 2
    This was the same issue for me. Not that it's relevant but I was using Roots' Sage Theme in Chrome on Ubuntu 17.10. May 20, 2018 at 1:09
  • 3
    I had to add !important to get it to work, probably bootstrap has a specific definition for this somewhere
    – webMan
    Jan 12, 2019 at 7:49
  • Yes it is box-shadow in bootstrap for example
    – mercury
    Nov 18, 2021 at 21:39
65

I just remove the outline from all the tags in the page by selecting all and applying outline:none to everything:)

*:focus {outline:none}

As bagofcole mentioned, you might need to add !important as well, so the style will look like this:

*:focus {outline:none !important}
2
  • 8
    Please do not do this. Users who navigate your page with the keyboard will be unable to see the currently focused element. Instead of hiding the outline, blur the element if the click event originates from a mouse.
    – joepio
    Aug 9, 2017 at 11:56
  • Not recommended that way Jul 22, 2021 at 7:08
46

Don't forget the !important declaration, for a better result

button:focus {outline:0 !important;}

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

8
  • 14
    "for a better result"? Could you explain what !important does?
    – Popnoodles
    May 28, 2014 at 17:20
  • 5
    But can you explain what it does? "For the reason it exists" doesn't explain to people who don't know its reason what its reason is.
    – Popnoodles
    May 31, 2014 at 0:40
  • 53
    !important should be used rarely, and only to make sure that something shouldn't be overwritten by subsequent rules. You should target your elements with the correct selector when overwriting previous rules.
    – Popnoodles
    Jun 3, 2014 at 17:24
  • 26
    The usage of !important is rarely justified. You should always scope your css selectors in a way that make more sense, and not use !important just because it gives you a "better result". Jul 1, 2014 at 15:13
  • 6
    Please don't do this. While technically this answers the OP's question, nuking every indication of focus position with outline:0 !important is bad UX and bad dev practice. If you're doing this, please make sure you're doing something else to indicate focus position (like changing background color of element).
    – cloudworks
    May 10, 2016 at 18:01
40

Removing outline is terrible for accessibility! Ideally, the focus ring shows up only when the user intends to use the keyboard.

Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS, and is supported in Firefox (caniuse). Until other major browsers support it, you can use this robust polyfill.

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

I also wrote a more detailed post just in case you need more info.

7
  • 1
    Mind you, AFAIK it doesn't need to be outline as such, as long as the :focus state is made clearly visible via some other means, like border, background-color, box-shadow, etc. Oct 27, 2018 at 18:21
  • 2
    Best answer! Your post is worth a read (and I am now looking at the rest of your blog 😅) The focus-visible npm package is really where it's at for now. Jan 24, 2019 at 17:55
  • 1
    This is definitely the best solution. With just a few lines of code I got rid of that annoying blue border on click, while keeping it on keyboard use. Thanks!
    – pesta
    Apr 1, 2019 at 3:26
  • 1
    Is this data correct? This selector seems supported in Chrome, not Firefox. developer.mozilla.org/en-US/docs/Web/CSS/… Jun 3, 2019 at 16:12
  • It seems that in Firefox, the selector is called :-moz-focusring, but contrary to what the docs say, it does not differentiate between click and tab focus. In Chrome, as of now you need to enable specific flags for it to work
    – phil294
    Mar 15, 2020 at 11:09
13

Add this in your CSS file.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
1
  • 3
    thank you. worked but MDN say: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
    – Behnam
    Feb 25, 2017 at 10:49
11

The fix for Chrome and other browsers

button:focus { outline: none !important; box-shadow: none !important; }
9

Use either this:

:active {
    outline:none;
}

or this if that doesn't work:

:active {
   outline:none !important;
}

This works for me (FF and Chrome, at least). Instead of targeting the :focus state, just target the :active state and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link. But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page. Both parties are happy. :)

2
  • 4
    Why edit my answer if you're only going to replace my minified version with the same code but extended? That didn't clarify it any better for users. Do you get answer credits for that or something? LOL...
    – chuk
    Nov 21, 2014 at 4:41
  • 4
    the point of StackExchange sites like this is to have answers that help anyone reading them to understand. For that purpose, an answer with terse, minified code is not as helpful as readably-formatted code. Improving answers by making them more readable is a normal way to improve the site for everyone.
    – bignose
    Oct 12, 2018 at 19:01
9

for this problem:

enter image description here

use this:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

result:

enter image description here

8

Most of the solutions will not work if you're using Bootstrap 4.1 and possibly other versions. After much head banging, I discovered you need to apply the shadow-none class:

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
7

For anyone using Bootstrap and having this problem, they use :active:focus as well as just :active and :focus so you'll need:

element:active:focus {
    outline: 0;
}

Hopefully saved someone some time figuring that one out, banged my head for bit wondering why such a simple thing wasn't working.

7

I had the same problem with bootstrap. I solved with both outline and box-shadow

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
4

This is what worked for me:

button:focus {
    box-shadow:none;
}
4

Another way to solve the accessibility problem that hasn't been mentioned here yet is through a little bit of Javascript. Credits go this insightful blogpost from hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

The approach here is really simple yet effective: Adding a class when people start using the tab-key to navigate the page (and optionally remove it when the switch to mouse again. Then you can use this class to either display a focus outline or not.

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);
1
  • 1
    Simple and effective... Love it.
    – VDWWD
    Feb 15, 2022 at 15:14
3

try this code for all element which have blue border problem

*{
outline: none;
}

or

*{
outline-style: none;
}
3

Until all modern browsers will start support css-selector :focus-visible,
the simplest and possibly best way to save accessibility is to remove this tricky focus only for mouse users and to save it for keyboard users:

1.Use this tiny polyfill (about 10kb): https://github.com/WICG/focus-visible
2.Add next code somewhere in your css:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Browser-support of css4-selector :focus-visible right now very weak:
https://caniuse.com/#search=focus-visible

3

I faced the same issue so I used simple CSS-

.custom-button {
    outline: none
}
2

If you want to delete same effect in input, you could add the following code as well as button.

input:focus {outline:0;}
2

Simply write outline:none;. No need to use pseudo element focus

2

Ok, even with the risk of never getting anyone to see this, because there are already so many answers I wanted to offer more js solutions as of the year 2020 there are plenty:

outline.js or alternatively outliner.js both libraries solving exactly the issues we all have here: remove outlines for mice but keep keyboard functionality or accessability.

So instead of deciding which is more important style or accessability, choose both!

2

Use this bellow code for Chakra UI,

:focus {
  box-shadow: none !important;
}

*[data-focus] {
  box-shadow: none !important;
}`
1

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.

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.

0
0

To remove blue background on tap, i use

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.