Remove blue border from css custom-styled button in Chrome

Question

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:

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;
}

Longdrawn

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. – Transsonic

Keep button:focus border style or keyboard users will not know the button is selected. – Francium

I found this excellent article which summarize everything hackernoon.com/… – Material

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: https://mcmap.net/q/53322/-remove-blue-border-from-css-custom-styled-button-in-chrome Don't listen to anybody saying to switch it off for everything. They're harming users who can't use mice (squeeek) – Demigod

Please don't set outline: none like this unless you are ready to replace the loss in accessibility. See this website: outlinenone.com – Carnahan

Try with button:focus-visible{outline:none} . Hope it can help you with – Telespectroscope

Answer 1

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>

Envious

Shouldn't this actually be outline: none; or doesn't that matter? – Brochure

@Brochure Well, the OP tried that and didn't worked for him. – Hymenopteran

@diosney The OP tried outline: none; with button:active and that didn't work. The important part is to put it in button:focus. outline: none; and outline: 0; both seem to work. – Plyler

Please never do this. Your minor grievance is irrelevant to the massive accessibility issue this becomes – Ornstead

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. – Decadent

@diosney WRONG, using outline:0 works fine in chrome. Removes the blue box for mouse users, but if you use TAB the box comes back. – Esquimau

I agree, that the outline should not be removed on desktop browsers, but it can sometimes be useful on mobile websites (since chrome displays the outline on tap which looks very irritating). Consider adding a mediaquery @media only screen{ ... } – Municipalize

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: https://mcmap.net/q/53322/-remove-blue-border-from-css-custom-styled-button-in-chrome This answer is harming users who can't use mice – Demigod

@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. – Demigod

The outline looks ugly. Is there no other way browser developers can think of a better way to indicate accessibility? – Currycomb

Accessible browser makers can easily fix this by forcing their own styling to elements. This makes more sense (and will help more disabled people) than trying to change every website. – Cotemporary

Answer 2

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:

Here are the buttons when they receive focus:

Here the buttons when they are pressed:

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.

Heave

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) – Shoat

You right! To take accessibility in account when removing outline, you need a bit of JavaScript: paciellogroup.com/blog/2012/04/… – Pryer

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. – Arvind

@Shoat How do you remove or change the blue border after the click? Can it be done via CSS or is Javascript required? – Outnumber

people with those issues can simply use vimium-ff – Underage

Answer 3

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

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

Stare

Thanks for your post! The "box-shadow" property was the point in my case. – Corroborate

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. – Schedule

I had to add !important to get it to work, probably bootstrap has a specific definition for this somewhere – Circumlocution

Yes it is box-shadow in bootstrap for example – Situation

Answer 4

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}

Zeeland

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. – Galloromance

Not recommended that way – Fontenot

This isn't recommended because users who are reduced to a keyboard can't use a mouse and need to see the currently focused element by pressing tab or whatever... – Freeland

Answer 5

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.

Heshum

"for a better result"? Could you explain what !important does? – Playacting

for the reason !important exists... if you want to remove all outlines, you should use it – Heshum

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. – Playacting

got it. sorry. using just button:focus {outline:0} works but if we want to apply style EVERYWHERE, we should be sure this style overrrides all another declarations of outline styles. sometimes peope use css frameworks or templates where outlines are used in some parts, if we dont need them, we just use !important property – Heshum

!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. – Playacting

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". – Envious

In what world does adding an !important gives you a better result...the only time you would use !important is to override an inline declaration that you have no way of changing otherwise – Interjacent

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). – Decadent

Answer 6

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 supported in all major browsers (caniuse).

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

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

Recce

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. – Seductive

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. – Grief

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! – Diphenyl

Is this data correct? This selector seems supported in Chrome, not Firefox. developer.mozilla.org/en-US/docs/Web/CSS/… – Aurora

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 – Skiplane

Also, FYI the above polyfill is about 4.2 KB in size minified, gzipped 1 KB. – Skiplane

Shouldn't it be :not(:focus-visible)? .focus-visible indicates a class rather than a pseudo class. – Barranca

Answer 7

Add this in your CSS file.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Uyekawa

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. – Greensickness

Answer 8

The fix for Chrome and other browsers

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

Indecorum

Answer 9

for this problem:

use this:

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

result:

Greensickness

Answer 10

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. :)

Tilley

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... – Tilley

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. – Karlsbad

Answer 11

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
}

Labourite

Answer 12

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>

Glycosuria

Answer 13

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.

Anderaanderea

Answer 14

This is what worked for me:

button:focus {
    box-shadow:none;
}

Oxonian

Answer 15

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);

Evie

Simple and effective... Love it. – Ninanincompoop

Answer 16

I faced the same issue so I used simple CSS-

.custom-button {
    outline: none
}

Hiragana

Answer 17

try this code for all element which have blue border problem

*{
outline: none;
}

or

*{
outline-style: none;
}

Asomatous

Answer 18

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

Pasquinade

Answer 19

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

input:focus {outline:0;}

Glassful

Answer 20

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

Wanyen

Answer 21

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!

Carrie

Answer 22

Use this bellow code for Chakra UI,

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

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

Deathless

Answer 23

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.

Demigod

Answer 24

To remove blue background on tap, i use

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

Interpleader

Answer 25

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

Peachy