Mdthbs

Can a US President have someone sent to prison?

Dold-Kan correspondence in the category of symmetric spectra

What is the best delay to use between characters sent to the serial port

Should I include salary information on my CV?

Row to remove the dotted white border around focused button text

MH370 blackbox - is it still possible to retrieve data from it?

How to modify the uneven space between separate loop cuts, while they are already cut?

The difference between Rad1 and Rfd1

Was "I have the farts, again" broadcast from the Moon to the whole world?

Is adding a new player (or players) a DM decision, or a group decision?

How well known and how commonly used was Huffman coding in 1979?

How to convert object fill in to fine lines?

Difference between 'demás' and 'otros'?

Forgot chonantanu after already making havdalah over wine

Would adding an external lens allow one area outside the focal plane to be in focus?

How hard is it to sell a home which is currently mortgaged?

Analog is Obtuse!

Children's short story about material that accelerates away from gravity

How would a order of Monks that renounce their names communicate effectively?

Generate and graph the Recamán Sequence

Did Chinese school textbook maps (c. 1951) "depict China as stretching even into the central Asian republics"?

Why is a blank required between "[[" and "-e xxx" in ksh?

Reverse of diffraction

If my Scout rogue has used his full movement on his turn, can he later use the reaction from the Skirmisher feature to move again?

Row to remove the dotted white border around focused button text

Dotted border around link?Remove border from IFrameHow can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to remove close button on the jQuery UI dialog?How to create an HTML button that acts like a link?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?How do I vertically center text with CSS?Remove blue border from css custom-styled button in Chrome

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}

6

3

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

html css firefox

share|improve this question

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

New contributor

Roland Gautier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

6

3

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

html css firefox

share|improve this question

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

New contributor

Roland Gautier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment | 

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

html css firefox

share|improve this question

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

New contributor

Roland Gautier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

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>

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>

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>

share|improve this question

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

New contributor

Roland Gautier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

share|improve this question

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

New contributor

Roland Gautier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

edited 15 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

New contributor

Roland Gautier is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

asked 10 hours ago

Roland GautierRoland Gautier

3333 bronze badges

3 Answers
3

active

oldest

votes

10

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;

}  

share|improve this answer

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Another useful information: In IE6 the dotted line cannot be removed unless this meta tag is added <meta http-equiv="X-UA-Compatible" content="IE=9" />
  
  – weegee
  9 hours ago
  
  
  

  
  
  
  

add a comment | 

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.

share|improve this answer

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

add a comment | 

-1

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

        }

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Roland Gautier is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f56725719%2frow-to-remove-the-dotted-white-border-around-focused-button-text%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

10

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;

}  

share|improve this answer

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Another useful information: In IE6 the dotted line cannot be removed unless this meta tag is added <meta http-equiv="X-UA-Compatible" content="IE=9" />
  
  – weegee
  9 hours ago
  
  
  

  
  
  
  

add a comment | 

10

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;

}  

share|improve this answer

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Another useful information: In IE6 the dotted line cannot be removed unless this meta tag is added <meta http-equiv="X-UA-Compatible" content="IE=9" />
  
  – weegee
  9 hours ago
  
  
  

  
  
  
  

add a comment | 

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;

}  

share|improve this answer

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

button::-moz-focus-inner,

input[type="reset"]::-moz-focus-inner,

input[type="button"]::-moz-focus-inner,

input[type="submit"]::-moz-focus-inner {

    border: none;

}  

share|improve this answer

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

answered 9 hours ago

AdriftAdrift

43.8k99 gold badges7575 silver badges8282 bronze badges

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.

share|improve this answer

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

add a comment | 

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.

share|improve this answer

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

add a comment | 

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.

share|improve this answer

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

button:focus,

button:active {

    -moz-outline: 0;

    -ms-outline:0;

    -o-outline: 0;

    -webkit-outline: 0;

} 

share|improve this answer

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

answered 9 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

-1

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

        }

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

add a comment | 

-1

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

        }

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

add a comment | 

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

        }

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

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

 input[type="button"]::-moz-focus-inner {

            border: 0

        }

share|improve this answer

edited 9 hours ago

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

answered 9 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges