Remove Button Focus Outline Using CSS

Introduction

A lot of people will use the outline CSS property to get rid of the focus outline around links using something like this:

1
2
3
* {
    outline: none;
}

However one thing you may have noticed if you’ve ever tried this is that it has no effect on the focus border of buttons:

Button with a focus outline

It is possible to remove (or style) this border, although be aware that it only works in Gecko based browsers (As far as I know – it’s certainly possible webkit has something similar now. Don’t hold your breath for IE though!).

The Method

The way to achieve this is to use the propriety mozilla pseudo-class ::-moz-focus-inner. This targets the focus outline and allows it to be styled. Note that it is the border property not the outline property which handles the style of the outline itself.

1
2
3
4
5
6
7
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

The ugly black border is banished:

The same button with the CSS applied

To style the border rather than remove it completely, a more accessible solution, you can use more standard pseudo-classes such as :focus and apply some normal CSS rules:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 1px dotted transparent;
}

button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
    padding: 3px;
    border-color: #F3F3F3;
}

A Note on Accessibility

I’m going to end this post with a word about accessibility. The technique described here is not very friendly to people using a keyboard to navigate the site either by choice or due to a disability. Personally I believe that accessibility and design need to work together as much as possible, and this is not something I would use on a public site. However I believe that in some situations, it is perfectly acceptable to sacrifice accessibility over design.

At my place of work for example, I develop and maintain a CMS which I am in the process of redeveloping/redesigning. I also have control over the user’s computers and the software on them, including the browser. Because I know the audience of the site, and know what browser they will be using as well as the fact that they will not be adversly affected by this, I made the design decision to use this technique. If you don’t know your audience this well I’d urge you to consider taking the hit on the design for the sake of users who might be affected by the lack of button focus indication.

38 comments

  • JZ

    Thank you for your solution!

  • Saval

    Gr8t suggestion, i had , so the dotted border will apply on the whole button instead of only text area

  • Saval

    Gr8t suggestion, i had /input value=”    Add” class=”btnbg” type=”button”/, so the dotted border will apply on the whole button instead of only text area

  • fryck

    Why not simply use onFocus=”blur()” on the submit button ? ;)

  • Karl

    Hi fryck

    There are a couple of reasons I can think of.

    Firstly, blur() will take the focus away from the button. This means users who do not use a mouse will never be able to activate your button. The CSS technique does not take the focus away from the button, it just allows you to style the focus indicator.

    Secondly that technique uses javascript, while this is pure CSS.

  • Brian Jørgensen

    Hi, thanks for the solution, but unfortunately this does not work in IE ? :(

  • Frank

    Thanks a lot. I was looking for this a long time.

    So it works for Gecko browsers, but what would be the solution for IE? Is the outline:none property enough then?

  • Satish

    Thank you so much for the solution!

  • swetha

    But, is there no solution in IE???

  • Rafa Colunga

    Hey, great tip!! i have been searching the way to get rid of these border in buttons for a while.

    By the way, i tend to specify slightly different styles for :focus, :hover, and :active states of buttons, generally changing the border or background color to a different tone, applying box-shadows and text-shadow, which looks way better than that outline thing, and gives a better overall impression without sacrificing accesibility.

    I think that as long as you give your keyboard users a clear clue of the focus on the button, you’ll be safe on accesibility, with outline or not.

    If you think it’s too much to style every state, i’d recommend at least using two different states, “normal” and “anything else” and apply it to :hover :active :focus, before you remove the outline.

  • usman

    Thanks a lot bro.
    i tried many tricks but dos’t work.

    Thanks a lot…

  • Diego Leismann

    Since I started to learn HTML 2 years ago I could never draw ‘outline’ that firefox, man you are very good! this code is very useful for anyone who suffers with these damn hatch. Thank

  • N V A Mahesh Kumar

    Thanks for the solution……..!

  • Pingback: Cómo quitar los puntitos de los botones de enlace « Salinasjavi's Blog

  • Vinoth

    Excellent! have been struggling for past 2 days. Thanks a lot.

  • Shaun

    Brilliant…this should be higher in the search results. Not easy information to find. Anyway, thanks for curing my headaches.

  • vj

    it works , great, thank you so much for the help.

  • Bintang

    I wanted to customize my submit button,
    this article helped me alot.

    Thanks.

  • narmosix

    Thanks man, you saved me :) . Cheers!

  • schoschie

    Hi, thanks for the tip, one question though: why the double colon? Is that correct?

    button::-moz-focus-inner

    Shouldn’t it be just one colon?
    I’ve seen it quoted with 2 colons everywhere on the web, so I’m assuming it’s correct, but I don’t understand it :)

  • illmatix

    Wow finally! Love this fix.
    I’m sure these double colons are just part of vendor specific pseudo selectors

  • Suketu Parikh

    Thanks for your solution. It helped us to solve a issue in our web page design.

  • James

    Man is this way of removing focus VALID from wc3 css validator ?

  • Steven

    TRULY AMAZING!! I NEVER THOUGHT I WOULD FIND A SOLUTION!! THANKS SO MUCH!

  • Matthew

    Thank you for the great solution. And a huge thank you for pointing out that there’s an accessibility downside to this solution.

  • Daniel

    Thank you, you really saved me :D . I’ve been looking for a solution to this bugging issue for 2 days now. It works like a charm.

  • paul

    Thank you for the perfect solution

  • Mufeed Ahmad

    great help! love this…..

  • Xian

    I was searching for a solution for the very same problem. Thank you for posting! It really helped me a lot!

  • Fujilives

    Thank you! This was driving me insane. I kept going in circles, because for some buttons it worked fine, but others it didn’t. I’m still not sure why it works on some and not others (they are still buttons, literally a copy paste to a different part of my site) but this seemed to do the trick just fine!

    Thanks a bunch!

  • ilham

    Is it work for ?

  • Sijith

    Many Thanks,It really helped me a lot

  • Jenas

    Can you inform how to do with radio buttons? Thanks

  • Andrey

    May be
    a:focus {outline: none;}

  • Website Advertising Space

    Works perfect! Nice solution, elegant! Any classes for getting rid of the border in IE?

  • Ivan Rey

    Is This Solution Validate In W3C CSS Validation?

  • Mosh

    Thanks! So useful.

  • Kumar

    Hi,Your solution worrking corrctly thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>