Mdthbs

Avoid bfseries from bolding pm in siunitx

A player is constantly pestering me about rules, what do I do as a DM?

Why is the divergence of this series apparently not predicted by the Monotonic Sequence Theorem?

Why isn’t the tax system continuous rather than bracketed?

What's the point of DHS warning passengers about Manila airport?

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

Why won't the ground take my seed?

Do sudoku answers always have a single minimal clue set?

Why is the Turkish president's surname spelt in Russian as Эрдоган, with г?

If a high rpm motor is run at lower rpm, will it produce more torque?

Generate and graph the Recamán Sequence

Do we or do we not observe (measure) superpositions all the time?

Was touching your nose a greeting in second millenium Mesopotamia?

How to determine what is the correct level of detail when modelling?

Can a US President have someone sent to prison?

Anagram Within an Anagram!

Is there any set of 2-6 notes that doesn't have a chord name?

Procedurally generate regions on island

How should I behave to assure my friends that I am not after their money?

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

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

Do 3D printers really reach 50 micron (0.050mm) accuracy?

Zombie diet, why humans?

Why does the numerical solution of an ODE move away from an unstable equilibrium?

Row to remove the dotted white border around focused button text

Dotted border around link?Remove border from IFrameHow to remove Firefox's dotted outline on BUTTONS as well as links?How to remove close button on the jQuery UI dialog?How to remove the border highlight on an input text elementHow to remove border (outline) around text/input boxes? (Chrome)Remove dotted outline from SWF uploadify buttonRemove blue border from css custom-styled button in Chromedotted outline coming for <button> tag in firefoxHow to remove the blue background of button on mobile?CSS Radio-button and text outline

.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 22 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 22 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 22 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 22 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 22 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 22 mins ago

Peter Mortensen

14.2k1919 gold badges8888 silver badges114114 bronze badges

edited 22 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 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 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 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 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 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 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 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 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 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 silver badges8282 bronze badges

answered 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 silver badges8282 bronze badges

answered 10 hours ago

AdriftAdrift

43.8k99 gold badges7676 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