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  lt button gt  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

User · Accepted Answer

button  -moz-focus-inner     border  0

User · Answer

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

User · Answer

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

User · Answer

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   https   www w3 org TR WCAG20-TECHS F78 html F78-examples

User · Answer

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      Happy Coding

User · Answer

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

User · Answer

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

User · Answer

This will get the range control    focus       outline none      -moz-focus-inner       border 0    input type range   -moz-focus-outer       border  0      From  Remove dotted outline from range input element in Firefox

User · Answer

This will get the range control    focus       outline none      -moz-focus-inner       border 0    input type range   -moz-focus-outer       border  0      From  Remove dotted outline from range input element in Firefox

User · Answer

Yep don t miss  important  button  -moz-focus-inner    border  0  important

User · Answer

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

User · Answer

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   https   www w3 org TR WCAG20-TECHS F78 html F78-examples

User · Answer

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      Happy Coding

User · Answer

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

User · Answer

You can try button  -moz-focus-inner  border  0px solid transparent   in your CSS

User · Answer

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

User · Answer

Simply add this css for select box   select -moz-focusring       color  transparent      text-shadow  0 0 0  000      This is working fine for me

User · Answer

Yep don t miss  important  button  -moz-focus-inner    border  0  important

User · Answer

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  amp  seals the deal

User · Answer

This works on firefox v-27 0    buttonClassName focus     outline none

User · Answer

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    gt  input type  button    -moz-focus-inner       border  0      outline   0

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    gt  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

User · Answer

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

User · Answer

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    gt  input type  button    -moz-focus-inner       border  0      outline   0

User · Answer

This works on firefox v-27 0    buttonClassName focus     outline none

User · Answer

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

User · Answer

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

User · Answer

focus   active       outline  0      border  0

User · Answer

You can try button  -moz-focus-inner  border  0px solid transparent   in your CSS

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    gt  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

User · Answer

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  amp  seals the deal

User · Answer

focus   active       outline  0      border  0

User · Answer

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

User · Answer

button  -moz-focus-inner   border  0      Where button can be whatever CSS selector for which you want to disable the behavior

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

button  -moz-focus-inner   border  0      Where button can be whatever CSS selector for which you want to disable the behavior

User · Answer

Simply add this css for select box   select -moz-focusring       color  transparent      text-shadow  0 0 0  000      This is working fine for me

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to firefox