Mfcttrf

What happens when your group is victim of a surprise attack but you can't be surprised?

Should I report a leak of confidential HR information?

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

Does ultrasonic bath cleaning damage laboratory volumetric glassware calibration?

How likely is sample A and sample B is from distribution C?

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?

Do I have to roll to maintain concentration if a target other than me who is affected by my concentration spell takes damage?

“Transitive verb” + interrupter+ “object”?

Are there any vegetarian astronauts?

Disabling automatic add after resolving git conflict

Generate and graph the Recamán Sequence

Three column layout

“Faire” being used to mean “avoir l’air”?

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

Should I include salary information on my CV?

How exactly is a normal force exerted, at the molecular level?

Does the UK have a written constitution?

The use of "I" and "we" used in the same sentence and other questions

Should I tell my insurance company I have an unsecured loan for my new car?

Was touching your nose a greeting in second millenium Mesopotamia?

What is the line crossing the Pacific Ocean that is shown on maps?

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

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

how 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 simpliest test page code. I cannot show a screenshot because it remove 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, this page still show 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

share

edited 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

asked 9 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 simpliest test page code. I cannot show a screenshot because it remove 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, this page still show 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

share

edited 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

asked 9 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 simpliest test page code. I cannot show a screenshot because it remove 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, this page still show 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

share

edited 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

asked 9 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

edited 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

asked 9 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

edited 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

asked 9 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 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

edited 9 hours ago

kiranvj

13.5k22 gold badges3737 silver badges5454 bronze badges

asked 9 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 9 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
  8 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 8 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 8 hours ago

answered 8 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%2fhow-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
  8 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
  8 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 8 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 8 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 8 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 8 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

answered 8 hours ago

Anubhav MishraAnubhav Mishra

4144 bronze badges

answered 8 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 8 hours ago

answered 8 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 8 hours ago

answered 8 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 8 hours ago

answered 8 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 8 hours ago

answered 8 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

answered 8 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges

answered 8 hours ago

Ronak KhangaonkarRonak Khangaonkar

8755 bronze badges