How to remove Firefox's dotted outline on BUTTONS as well as links?
CssFirefoxCss Problem Overview
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)
Css Solutions
Solution 1 - Css
button::-moz-focus-inner {
border: 0;
}
Solution 2 - Css
No need to define a selector.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.
Solution 3 - Css
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 : 0;
}
/*for IE8 and below */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
}
Solution 4 - Css
The below worked for me in case of LINKS, thought of sharing - in case someone is interested.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Cheers!
Solution 5 - Css
:focus, :active {
outline: 0;
border: 0;
}
Solution 6 - Css
[Update] This solution doesn't work anymore. The solution that worked for me is this one https://stackoverflow.com/a/3844452/925560
The answer marked as correct didn't work with Firefox 24.0.
To remove Firefox's dotted outline on buttons and anchor tags I added the code below:
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
}
I found the solution here: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
Solution 7 - Css
Tried most of the answers here, but none of them worked for me. When I realized that I have to get rid of the blue outline on buttons on Chrome too, I found another solution. https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome
This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)
button:focus {outline:0 !important;}
Solution 8 - Css
This will get the range control:
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
Solution 9 - Css
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
Solution 10 - Css
There is many solutions found on the web for this, many of which work, but to force this, so that absolutely nothing can highlight/focus once a use the following:
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
This just adds that little bit extra security & seals the deal!
Solution 11 - Css
Tested on Firefox 46 and Chrome 49 using this code.
input:focus, textarea:focus, button:focus {
outline: none !important;
}
Before (white dots are visible )
After ( White dots are invisible )
If you want to apply only on few input fields, buttons etc. Use the more specific code.
input[type=text] {
outline: none !important;
}
Solution 12 - Css
Simply add this css for select box
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
This is working fine for me.
Solution 13 - Css
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.
Solution 14 - Css
In most cases without adding the !important to the CSS code, it won't work.
##So, do not forget to add !important
a, a:active, a:focus{
outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}
Or any other code:
button::-moz-focus-inner {
border: 0 !important;
}
Solution 15 - Css
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}
Solution 16 - Css
button::-moz-focus-inner { border: 0; }
Where button can be whatever CSS selector for which you want to disable the behavior.
Solution 17 - Css
If you have a border on a button and want to hide the dotted outline in Firefox without removing the border (and hence it's extra width on the button) you can use:
.button::-moz-focus-inner {
border-color: transparent;
}
Solution 18 - Css
Remove dotted outline from links, button and input element.
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline : 0;
}
Solution 19 - Css
The CSS code below works to remove this:
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
}
Solution 20 - Css
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.
Solution 21 - Css
This works on firefox v-27.0
.buttonClassName:focus {
outline:none;
}
Solution 22 - Css
After trying many options from the above only the following worked for me.
*:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;}
Solution 23 - Css
Along with Bootstrap 3 I used this code. The second set of rules just undo what bootstrap does for focus/active buttons:
button::-moz-focus-inner {
border: 0; /*removes dotted lines around buttons*/
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
outline:0;
}
NOTE that your custom css file should come after Bootstrap css file in your html code to override it.
Solution 24 - Css
Yep don't miss !important
button::-moz-focus-inner {
border: 0 !important;
}
Solution 25 - Css
You can try button::-moz-focus-inner {border: 0px solid transparent;} in your CSS.