6

I need to, but cannot, remove the white dotted border around the text of a focused button.

After reading articles about "remove white border (especially Dotted border around link? and links inside), I have try several solutions of disabling outline like "outline: 0; or outline: none;, using or not !important.

But nothing does remove the dotted white border around the text of a focused button. Here is my simplest test page code. I cannot show a screenshot, because it removes the focus from the button.

button {
  font-size: 87.5%;
  font-family: "ubuntu", Sans-serif;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  cursor: pointer;
  background-color: royalblue;
  color: white;
  border: 0;
}

button:focus,
button:active {
  outline: none;
  outline: 0;
  outline: none !important;
  outline: 0 !important;
}
<button type="button">TEST</button>

Using Firefox 67.0.3 on Ubuntu 18.04 (Bionic Beaver), this page still shows a dotted white border around focused button text, which I'd like to remove (I'll show the focus with a method of my own).

Adrift
  • 58,167
  • 12
  • 92
  • 90
Roland Gautier
  • 345
  • 3
  • 6

4 Answers4

11

These styles are declared at the UA level, so each browser has their own implementation (and in Firefox case, pseudo elements for targeting them).

In Firefox, you can use the ::-moz-focus-inner pseudo element:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
}
Adrift
  • 58,167
  • 12
  • 92
  • 90
  • 1
    Another useful information: In IE6 the dotted line cannot be removed unless this meta tag is added `` – weegee Jun 23 '19 at 16:49
  • Thank you Adrift, It perfectly does the job. Because of "-moz-", I suppose that "focus-inner" is a mozilla-only property. Where could I get the similar info for the other major browsers (IE, Chrome (Chromium), Opera, Safar – Roland Gautier Jun 25 '19 at 08:35
  • @adrift : the funny point is that even mdm web docs (aka mozilla devs docs) doesn't know "::-moz-focus-inner" pseudo selector ... – Roland Gautier Jun 25 '19 at 15:41
  • @adrift, for my button, button::-moz-focus-inner alone functions but input[type="button"]::-moz-focus-inner doesn't. – Roland Gautier Jun 26 '19 at 08:03
2

You need to add setback for different browsers, for example:

button:focus,
button:active {
    -moz-outline: 0;
    -ms-outline:0;
    -o-outline: 0;
    -webkit-outline: 0;
}

These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.

Anubhav Mishra
  • 31
  • 4
0

Just set border: 0 , I have updated your code try this it will work!

 <input type="button" value="text">

And in style tag just use this:-

 input[type="button"]::-moz-focus-inner {
            border: 0
        }
Ronak Khangaonkar
  • 346
  • 2
  • 14
  • Thank you Ronack, I have install this and it does function. Unfortunately, my pages are expected to be online one next day ... Where could I get the same info for the other major browsers (IE, Chrome (Chromium), Opera, Safari, ...) ? – Roland Gautier Jun 25 '19 at 08:32
  • Thank you Kiranvj, I yet use prefixFree, witch purpose seams the same. – Roland Gautier Jun 25 '19 at 12:39
  • How can I check that "::-webkit-focus-inner" and "::-o-focus-inner" and so on, will have the same influence in the other browsers ? – Roland Gautier Jun 25 '19 at 15:45
0

a::-moz-focus-inner did not work for me in a situation where a React Router redirect was inexplainably causing focus borders. The selector itself did not activate.

Temporarily solved with (but not happy with):

a::-moz-focusring {
  outline: none;
}
iambryanhaney
  • 93
  • 6