CODEWITHSUNDEEP
htmlcssfirefox
Roland Gautier
Roland Gautier

Reputation: 345

How to remove the dotted white border around focused button text

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

Upvotes: 6

Views: 2900

Answers (4)

iambryanhaney
iambryanhaney

Reputation: 153

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

Upvotes: 0

Ronak Khangaonkar
Ronak Khangaonkar

Reputation: 346

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
        }

Upvotes: 0

Anubhav Mishra
Anubhav Mishra

Reputation: 31

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.

Upvotes: 2

Adrift
Adrift

Reputation: 59859

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

Upvotes: 11

Related Questions