How to remove Firefox's dotted outline on BUTTONS as well as links?

Question

I can make Firefox not display the ugly dotted focus outlines on links with this:

a:focus { 
    outline: none; 
}

But how can I do this for <button> tags as well? When I do this:

button:focus { 
    outline: none; 
}

the buttons still have the dotted focus outline when I click on them.

(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)

Answer 1

You do realize that those outlines are there for usability purposes, right?

Answer 2

I think you can do this with Javascript's blur() function, but keep in mind, it is a common usability concept in modern web browsers, to which users may have become accustomed.

Although I had a discussion with my professor at university, if disabling link focus is a good idea from a designers perspective...

Answer 3

There's no way to remove these dotted focus in Firefox using CSS.

If you have access to the computers where your webapplication works, go to about:config in Firefox and set browser.display.focus_ring_width to 0. Then Firefox won't show any dotted borders at all.

The following bug explains the topic: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Answer 4

It looks like the only way to achieve this is by setting

browser.display.focus_ring_width = 0

in about:config on a per browser basis.

Answer 5

Thanks for the about:config tip. It's just what I needed. I have no problem in setting it directly in the browser, since the page I'm doing is for Intranet use only.

Answer 6

button::-moz-focus-inner { border: 0; }

Answer 7

Personally I am against anything to violates the operating system's UI design philosophy. And removing the focus rectangle certainly qualifies.

Answer 8

why u said that ... the above topic talking about when you build a web page with links u can use the CSS rule above so your links will not have the focus effect on ... thats it

thanks edward for that

Answer 9

hi , just add this onfocus="blur()"

ex.

<input id="sb" width=212px type="submit" name="submitBtn"  onfocus="blur()"  value="<?php echo $buttontext ?>"/>

Answer 10

absolutely do NOT use onfocus="blur()" EVER to get rid of a minor visual annoyance. You kill all possibility of keyboard use with that one.

Answer 11

so hows result can we remove on focus outline in firefox?

Answer 12

"Personally I am against anything to violates the operating system's UI design philosophy. And removing the focus rectangle certainly qualifies."

It only qualifies when the focus rectangle works properly. Half the time, Firefox puts the dotted outline right down through the middle of the button graphic, and it looks terrible. Plus, Firefox is hardly using the UI controls of the OS to begin with, so saying this has anything to do with the OS's UI is already laughable. Having a focus rectangle that doesn't look right doesn't do anything to improve usability.

We should have the ability to replace the native focus rectangle with one that actually works for our individual purposes, just as we should have the responsibility to of course replace the built-in focus rectangle with something similar so the user retains the same usability.

I'm so tired of browser makers (and developers!) acting like their way is the only way, and if you don't like it, too bad. Why not make things more open so that we have more options, and can craft the user experience that we want, as opposed to having to fit something into your rigid patterns of thinking because a few bad apples might not do the right thing? It's collective design censorship and it doesn't make any sense. If your site looks like crap or isn't usable because you're not putting the effort in to make sure it's a sound design, that's your problem. I don't need the Mozilla dev team to ensure that my designs make sense, I am perfectly capable of making that call on my own.

Answer 13

You might want to intensify the focus rather than get rid of it.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue}

Answer 14

I think you should really know what you're doing by removing the focus outline, because it can mess it up for keyboard navigation and accessibility. If you need to take it out because of a design issue, add a :focus state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.

Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.

And NEVER use the blur() js function. Use the ::-moz-focus-inner pseudo class.

Answer 15

If you prefer to use css to get rid of the dotted outline:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Answer 16

button::-moz-focus-inner { border: 0; }

where 'button' can be whatever css selector you want to disable the behavior for

Answer 17

I don't know why peopple create wierd rules, this is the first time I have to vote and I can't so I will copy chinkchink answeer which is the correct one:

If you prefer to use css to get rid of the dotted outline:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Answer 18

Hi, you can try button::-moz-focus-inner {border: 0px solid transparent;} in your css

Answer 19

:focus, :active {
outline: 0;
border: 0;

}

Answer 20

sweet. button::-moz-focus-inner { border: 0; } works perfectly. thanks polvero.

Answer 21

No need to define a selector.

:focus {outline:none;}
::-moz-focus-inner {border:0;}