Row to remove the dotted white border around focused button textDotted 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
Disabling automatic add after resolving git conflict
How to write or read powers (math) by words?
In native German words, is Q always followed by U, as in English?
I played my first (rapid) tournament recently and I wanted to calculate my ELO
Should I include salary information on my CV?
How hard is it to sell a home which is currently mortgaged?
Bash echo $-1 prints hb1. Why?
Anagram Within an Anagram!
When is it ok to add filler to a story?
Analog is Obtuse!
If a high rpm motor is run at lower rpm, will it produce more torque?
Going to get married soon, should I do it on Dec 31 or Jan 1?
How can I check type T is among parameter pack Ts... in C++?
Why is a blank required between "[[" and "-e xxx" in ksh?
Do I have to roll to maintain concentration if a target other than me who is affected by my concentration spell takes damage?
Do we or do we not observe (measure) superpositions all the time?
Can a US President have someone sent to prison?
Set vertical spacing between two particular items
What happens when your group is victim of a surprise attack but you can't be surprised?
Was "I have the farts, again" broadcast from the Moon to the whole world?
One folder two different locations on ubuntu 18.04
Three column layout
Should I hide continue button until tasks are completed?
How can I convince my reader that I will not use a certain trope?
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;
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
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
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
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.
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).
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>
html css firefox
html css firefox
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.
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 51 mins ago


Peter Mortensen
14.2k19 gold badges88 silver badges114 bronze badges
14.2k19 gold badges88 silver badges114 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
333 bronze badges
333 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.
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 |
add a comment |
3 Answers
3
active
oldest
votes
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;
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
10 hours ago
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.
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
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.
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
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
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
10 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;
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
10 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;
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;
answered 10 hours ago


AdriftAdrift
43.8k9 gold badges76 silver badges82 bronze badges
43.8k9 gold badges76 silver badges82 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
10 hours ago
add a comment |
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
10 hours ago
1
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
10 hours ago
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
10 hours ago
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.
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.
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.
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.
answered 10 hours ago


Anubhav MishraAnubhav Mishra
414 bronze badges
414 bronze badges
add a comment |
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
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
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
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
edited 9 hours ago
answered 10 hours ago


Ronak KhangaonkarRonak Khangaonkar
875 bronze badges
875 bronze badges
add a comment |
add a comment |
Roland Gautier is a new contributor. Be nice, and check out our Code of Conduct.
Roland Gautier is a new contributor. Be nice, and check out our Code of Conduct.
Roland Gautier is a new contributor. Be nice, and check out our Code of Conduct.
Roland Gautier is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown