<p>I can make Firefox not display the ugly dotted focus outlines on <b>links</b> with this:</p>

<pre class="lang-css prettyprint-override"><code>a:focus { 
    outline: none; 
}
</code></pre>

<p>But how can I do this for <code>&lt;button&gt;</code> tags as well? When I do this:</p>

<pre class="lang-css prettyprint-override"><code>button:focus { 
    outline: none; 
}
</code></pre>

<p>the buttons still have the dotted focus outline when I click on them.</p>

<p>(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)</p>

[{'answer_id': 71251, 'author': 'Vitaly Sharovatov', 'author_id': 6647, 'author_profile': 'https://Stackoverflow.com/users/6647', 'pm_score': 3, 'selected': False, 'text': '<p>There\'s no way to remove these dotted focus in Firefox using CSS.</p>\n\n<p>If you have access to the computers where your webapplication works, go to about:config in Firefox and set <code>browser.display.focus_ring_width</code> to 0. Then Firefox won\'t show any dotted borders at all.</p>\n\n<p>The following bug explains the topic: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=74225" rel="nofollow noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=74225</a></p>\n'}, {'answer_id': 71260, 'author': 'AlexWilson', 'author_id': 2240, 'author_profile': 'https://Stackoverflow.com/users/2240', 'pm_score': 2, 'selected': False, 'text': '<p>It looks like the only way to achieve this is by setting</p>\n\n<pre><code>browser.display.focus_ring_width = 0\n</code></pre>\n\n<p>in about:config on a per browser basis.</p>\n'}, {'answer_id': 199319, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 11, 'selected': True, 'text': '<pre class="lang-css prettyprint-override"><code>button::-moz-focus-inner {\n  border: 0;\n}\n</code></pre>\n'}, {'answer_id': 857360, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>You might want to intensify the focus rather than get rid of it.</p>\n\n<pre><code>button::-moz-focus-inner {border: 2px solid transparent;}\n\nbutton:focus::-moz-focus-inner {border-color: blue} \n</code></pre>\n'}, {'answer_id': 1095624, 'author': 'Flatline', 'author_id': 134628, 'author_profile': 'https://Stackoverflow.com/users/134628', 'pm_score': 2, 'selected': False, 'text': "<p>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.</p>\n\n<p>If you need to take it out because of a design issue, add a <code>:focus</code> state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.</p>\n\n<p>Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.</p>\n\n<p>And <strong>never</strong> use the <code>blur()</code> js function. Use the <code>::-moz-focus-inner</code> pseudo class.</p>\n"}, {'answer_id': 1622384, 'author': 'chinkchink', 'author_id': 196344, 'author_profile': 'https://Stackoverflow.com/users/196344', 'pm_score': 6, 'selected': False, 'text': '<p>If you prefer to use CSS to get rid of the dotted outline:</p>\n\n<pre class="lang-css prettyprint-override"><code>/*for FireFox*/\n    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner\n    {   \n        border : 0;\n    } \n/*for IE8 and below */\n    input[type="submit"]:focus, input[type="button"]:focus\n    {     \n        outline : none; \n    }\n</code></pre>\n'}, {'answer_id': 1750468, 'author': 'wavded', 'author_id': 47158, 'author_profile': 'https://Stackoverflow.com/users/47158', 'pm_score': 2, 'selected': False, 'text': '<pre><code>button::-moz-focus-inner { border: 0; }\n</code></pre>\n\n<p>Where <code>button</code> can be whatever CSS selector for which you want to disable the behavior.</p>\n'}, {'answer_id': 2021783, 'author': 'usual', 'author_id': 245688, 'author_profile': 'https://Stackoverflow.com/users/245688', 'pm_score': 0, 'selected': False, 'text': '<p>You can try <code>button::-moz-focus-inner {border: 0px solid transparent;}</code> in your CSS.</p>\n'}, {'answer_id': 3129247, 'author': 'blizzyx', 'author_id': 377621, 'author_profile': 'https://Stackoverflow.com/users/377621', 'pm_score': 5, 'selected': False, 'text': '<pre class="lang-css prettyprint-override"><code>:focus, :active {\n    outline: 0;\n    border: 0;\n}\n</code></pre>\n'}, {'answer_id': 3844452, 'author': 'Anderson Custódio', 'author_id': 464428, 'author_profile': 'https://Stackoverflow.com/users/464428', 'pm_score': 8, 'selected': False, 'text': '<p>No need to define a selector.</p>\n\n<pre class="lang-css prettyprint-override"><code>:focus {outline:none;}\n::-moz-focus-inner {border:0;}\n</code></pre>\n\n<p>However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.</p>\n\n<p><a href="https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples" rel="noreferrer">https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples</a></p>\n'}, {'answer_id': 6635075, 'author': 'Dave Everitt', 'author_id': 123033, 'author_profile': 'https://Stackoverflow.com/users/123033', 'pm_score': 2, 'selected': False, 'text': '<p>If you have a border on a button and want to hide the dotted outline in Firefox <em>without</em> removing the border (and hence it\'s extra width on the button) you can use:</p>\n\n<pre class="lang-css prettyprint-override"><code>.button::-moz-focus-inner {\n    border-color: transparent;\n}\n</code></pre>\n'}, {'answer_id': 7628310, 'author': 'foxybagga', 'author_id': 95350, 'author_profile': 'https://Stackoverflow.com/users/95350', 'pm_score': 5, 'selected': False, 'text': '<p>The below worked for me in case of LINKS, thought of sharing - in case someone is interested. </p>\n\n<pre class="lang-css prettyprint-override"><code>a, a:visited, a:focus, a:active, a:hover{\n    outline:0 none !important;\n}\n</code></pre>\n\n<p>Cheers!</p>\n'}, {'answer_id': 15608143, 'author': 'Shannon Hochkins', 'author_id': 1683943, 'author_profile': 'https://Stackoverflow.com/users/1683943', 'pm_score': 3, 'selected': False, 'text': '<p>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:</p>\n\n<pre class="lang-css prettyprint-override"><code>::-moz-focus-inner, :active, :focus {\n    outline:none;\n    border:0;\n    -moz-outline-style: none;\n}\n</code></pre>\n\n<p>This just adds that little bit extra security &amp; seals the deal!</p>\n'}, {'answer_id': 18993053, 'author': 'Renato Carvalho', 'author_id': 925560, 'author_profile': 'https://Stackoverflow.com/users/925560', 'pm_score': 3, 'selected': False, 'text': '<p>[Update] This solution doesn\'t work anymore. The solution that worked for me is this one <a href="https://stackoverflow.com/a/3844452/925560">https://stackoverflow.com/a/3844452/925560</a></p>\n\n<p><strong>The answer marked as correct didn\'t work with Firefox 24.0.</strong></p>\n\n<p>To remove Firefox\'s dotted outline on buttons and anchor tags I added the code below:</p>\n\n<pre class="lang-css prettyprint-override"><code>a:focus, a:active, \nbutton::-moz-focus-inner,\ninput[type="reset"]::-moz-focus-inner,\ninput[type="button"]::-moz-focus-inner,\ninput[type="submit"]::-moz-focus-inner,\nselect::-moz-focus-inner,\ninput[type="file"] &gt; input[type="button"]::-moz-focus-inner {\n    border: 0;\n    outline : 0;\n}\n</code></pre>\n\n<p>I found the solution here: <a href="http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html" rel="nofollow noreferrer">http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html</a></p>\n'}, {'answer_id': 20731378, 'author': 'Fizer Khan', 'author_id': 1154350, 'author_profile': 'https://Stackoverflow.com/users/1154350', 'pm_score': 2, 'selected': False, 'text': '<p>Remove dotted outline from links, button and input element.</p>\n\n<pre><code>a:focus, a:active,\nbutton::-moz-focus-inner,\ninput[type="reset"]::-moz-focus-inner,\ninput[type="button"]::-moz-focus-inner,\ninput[type="submit"]::-moz-focus-inner {\n    border: 0;\n    outline : 0;\n}\n</code></pre>\n'}, {'answer_id': 20833484, 'author': 'DPP', 'author_id': 1766855, 'author_profile': 'https://Stackoverflow.com/users/1766855', 'pm_score': 1, 'selected': False, 'text': '<p>This works on firefox v-27.0</p>\n\n<pre><code> .buttonClassName:focus {\n  outline:none;\n}\n</code></pre>\n'}, {'answer_id': 24791473, 'author': 'Vartox', 'author_id': 2366511, 'author_profile': 'https://Stackoverflow.com/users/2366511', 'pm_score': 3, 'selected': False, 'text': '<p>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. <a href="https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome">Remove blue border from css custom-styled button in Chrome</a></p>\n\n<p>This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)</p>\n\n<pre class="lang-css prettyprint-override"><code>button:focus {outline:0 !important;}\n</code></pre>\n'}, {'answer_id': 31893576, 'author': 'herci', 'author_id': 3294466, 'author_profile': 'https://Stackoverflow.com/users/3294466', 'pm_score': 2, 'selected': False, 'text': "<p>In most cases without adding the <strong><code>!important</code></strong> to the CSS code, it won't work.</p>\n\n<h2>So, do not forget to add <code>!important</code></h2>\n\n<pre><code>a, a:active, a:focus{\n    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */\n}\n</code></pre>\n\n<p><br>\nOr any other code:</p>\n\n<pre><code>button::-moz-focus-inner {\n  border: 0 !important;\n}\n</code></pre>\n"}, {'answer_id': 36897437, 'author': 'Madan Sapkota', 'author_id': 782535, 'author_profile': 'https://Stackoverflow.com/users/782535', 'pm_score': 3, 'selected': False, 'text': '<p>Tested on Firefox 46 and Chrome 49 using this code.</p>\n<pre><code>input:focus, textarea:focus, button:focus {\n    outline: none !important;\n}\n</code></pre>\n<p><strong>Before</strong> (white dots are visible )</p>\n<p><a href="https://i.stack.imgur.com/1hP1m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1hP1m.png" alt="input with white dots" /></a></p>\n<p><strong>After</strong> ( White dots are invisible )\n<a href="https://i.stack.imgur.com/62tZV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/62tZV.png" alt="enter image description here" /></a></p>\n<p>If you want to apply only on few input fields, buttons etc. Use the more specific code.</p>\n<pre><code>input[type=text] {\n  outline: none !important;\n}\n</code></pre>\n'}, {'answer_id': 37482092, 'author': 'Syed Waqas Bukhary', 'author_id': 3633267, 'author_profile': 'https://Stackoverflow.com/users/3633267', 'pm_score': 1, 'selected': False, 'text': '<p>After trying many options from the above only the following worked for me.</p>\n\n<pre><code>*:focus, *:visited, *:active, *:hover  { outline:0 !important;}\n*::-moz-focus-inner {border:0;}\n</code></pre>\n'}, {'answer_id': 37717454, 'author': 'Ehsan88', 'author_id': 2571422, 'author_profile': 'https://Stackoverflow.com/users/2571422', 'pm_score': 1, 'selected': False, 'text': '<p>Along with Bootstrap 3 I used this code. The second set of rules just <em>undo</em> what bootstrap does for focus/active buttons:</p>\n\n<pre><code>button::-moz-focus-inner {\n  border: 0;    /*removes dotted lines around buttons*/\n}\n\n.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{\n  outline:0;\n}\n</code></pre>\n\n<p><strong>NOTE that your custom css file should come after Bootstrap css file in your html code to override it.</strong></p>\n'}, {'answer_id': 38766296, 'author': 'kurumkan', 'author_id': 5714544, 'author_profile': 'https://Stackoverflow.com/users/5714544', 'pm_score': 2, 'selected': False, 'text': '<p>The CSS code below works to remove this:</p>\n\n<pre><code>a:focus, a:active, \nbutton::-moz-focus-inner,\ninput[type="reset"]::-moz-focus-inner,\ninput[type="button"]::-moz-focus-inner,\ninput[type="submit"]::-moz-focus-inner,\nselect::-moz-focus-inner,\ninput[type="file"] &gt; input[type="button"]::-moz-focus-inner {\n    border: 0;\n    outline : 0;\n}\n</code></pre>\n'}, {'answer_id': 41631535, 'author': 'Abhay Singh', 'author_id': 2063930, 'author_profile': 'https://Stackoverflow.com/users/2063930', 'pm_score': 3, 'selected': False, 'text': '<p>Simply add this css for select box </p>\n\n<pre><code>select:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 #000;\n}\n</code></pre>\n\n<p>This is working fine for me.</p>\n'}, {'answer_id': 47195132, 'author': 'bob', 'author_id': 1088866, 'author_profile': 'https://Stackoverflow.com/users/1088866', 'pm_score': 3, 'selected': False, 'text': '<p>This will get the range control:</p>\n\n<pre><code>:focus {\n    outline:none;\n}\n::-moz-focus-inner {\n    border:0;\n}\ninput[type=range]::-moz-focus-outer {\n    border: 0;\n}\n</code></pre>\n\n<p>From: <a href="https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox">Remove dotted outline from range input element in Firefox</a></p>\n'}, {'answer_id': 55434025, 'author': 'Riwaj Chalise', 'author_id': 10003098, 'author_profile': 'https://Stackoverflow.com/users/10003098', 'pm_score': 1, 'selected': False, 'text': '<p>Yep don\'t miss <strong>!important</strong></p>\n\n<pre class="lang-css prettyprint-override"><code>button::-moz-focus-inner {\n border: 0 !important;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/71074', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4639/']