Remove double outline on button and it's text inside
I have a button with a text inside of it. I styled the outline on the :active and focus state like in the snippet bellow. I have a strange behaviour on firefox: When I tab into the button, there is an outline around the button and a second one around the text inside the button (see screenshot below). I just get this strange issue on firefox. How can I fix this. The only answer on my question that I found was, to use outline: none;, but this is not what I want. I want an outline just around the button.
outline on chrome Windows 10:
outline on firefox (issue) Windows 10:
.button__btn {
background-color: transparent;
border: 2px solid blue;
font-size: 20px;
padding: 8px 24px;
text-align: center;
}
.button__btn:active,
.button__btn:focus {
outline: 1px dotted black;
outline-offset: 5px;
}<div class="button">
<button class="button__btn">I'm a default button</button>
</div>Here's also a codepen: https://codepen.io/STWebtastic/pen/EORBpE
html css windows firefox outline
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
add a comment |
I have a button with a text inside of it. I styled the outline on the :active and focus state like in the snippet bellow. I have a strange behaviour on firefox: When I tab into the button, there is an outline around the button and a second one around the text inside the button (see screenshot below). I just get this strange issue on firefox. How can I fix this. The only answer on my question that I found was, to use outline: none;, but this is not what I want. I want an outline just around the button.
outline on chrome Windows 10:
outline on firefox (issue) Windows 10:
.button__btn {
background-color: transparent;
border: 2px solid blue;
font-size: 20px;
padding: 8px 24px;
text-align: center;
}
.button__btn:active,
.button__btn:focus {
outline: 1px dotted black;
outline-offset: 5px;
}<div class="button">
<button class="button__btn">I'm a default button</button>
</div>Here's also a codepen: https://codepen.io/STWebtastic/pen/EORBpE
html css windows firefox outline
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
add a comment |
I have a button with a text inside of it. I styled the outline on the :active and focus state like in the snippet bellow. I have a strange behaviour on firefox: When I tab into the button, there is an outline around the button and a second one around the text inside the button (see screenshot below). I just get this strange issue on firefox. How can I fix this. The only answer on my question that I found was, to use outline: none;, but this is not what I want. I want an outline just around the button.
outline on chrome Windows 10:
outline on firefox (issue) Windows 10:
.button__btn {
background-color: transparent;
border: 2px solid blue;
font-size: 20px;
padding: 8px 24px;
text-align: center;
}
.button__btn:active,
.button__btn:focus {
outline: 1px dotted black;
outline-offset: 5px;
}<div class="button">
<button class="button__btn">I'm a default button</button>
</div>Here's also a codepen: https://codepen.io/STWebtastic/pen/EORBpE
html css windows firefox outline
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
I have a button with a text inside of it. I styled the outline on the :active and focus state like in the snippet bellow. I have a strange behaviour on firefox: When I tab into the button, there is an outline around the button and a second one around the text inside the button (see screenshot below). I just get this strange issue on firefox. How can I fix this. The only answer on my question that I found was, to use outline: none;, but this is not what I want. I want an outline just around the button.
outline on chrome Windows 10:
outline on firefox (issue) Windows 10:
.button__btn {
background-color: transparent;
border: 2px solid blue;
font-size: 20px;
padding: 8px 24px;
text-align: center;
}
.button__btn:active,
.button__btn:focus {
outline: 1px dotted black;
outline-offset: 5px;
}<div class="button">
<button class="button__btn">I'm a default button</button>
</div>Here's also a codepen: https://codepen.io/STWebtastic/pen/EORBpE
.button__btn {
background-color: transparent;
border: 2px solid blue;
font-size: 20px;
padding: 8px 24px;
text-align: center;
}
.button__btn:active,
.button__btn:focus {
outline: 1px dotted black;
outline-offset: 5px;
}<div class="button">
<button class="button__btn">I'm a default button</button>
</div>.button__btn {
background-color: transparent;
border: 2px solid blue;
font-size: 20px;
padding: 8px 24px;
text-align: center;
}
.button__btn:active,
.button__btn:focus {
outline: 1px dotted black;
outline-offset: 5px;
}<div class="button">
<button class="button__btn">I'm a default button</button>
</div>html css windows firefox outline
html css windows firefox outline
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
edited Nov 26 '18 at 13:31
MrBuggy
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
asked Nov 26 '18 at 12:59
MrBuggyMrBuggy
1,69721850
1,69721850
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Please use following code:
button::-moz-focus-inner {
border: 0;
}
It will remove firefox inner outline for all buttons.
this suggestion was also mentioned here: How to remove Firefox's dotted outline on BUTTONS as well as links?
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
add a comment |
Try this:
CSS
.button{
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer - Edge */
user-select: none; /* Chrome and Opera */
}
The user-select property specifies whether the text of an element can
be selected.
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
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
});
}
});
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%2f53481654%2fremove-double-outline-on-button-and-its-text-inside%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Please use following code:
button::-moz-focus-inner {
border: 0;
}
It will remove firefox inner outline for all buttons.
this suggestion was also mentioned here: How to remove Firefox's dotted outline on BUTTONS as well as links?
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
add a comment |
Please use following code:
button::-moz-focus-inner {
border: 0;
}
It will remove firefox inner outline for all buttons.
this suggestion was also mentioned here: How to remove Firefox's dotted outline on BUTTONS as well as links?
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
add a comment |
Please use following code:
button::-moz-focus-inner {
border: 0;
}
It will remove firefox inner outline for all buttons.
this suggestion was also mentioned here: How to remove Firefox's dotted outline on BUTTONS as well as links?
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
Please use following code:
button::-moz-focus-inner {
border: 0;
}
It will remove firefox inner outline for all buttons.
this suggestion was also mentioned here: How to remove Firefox's dotted outline on BUTTONS as well as links?
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
edited Nov 26 '18 at 14:23
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
answered Nov 26 '18 at 14:09
Łukasz BlaszyńskiŁukasz Blaszyński
1,105128
1,105128
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
add a comment |
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
Yes, I found the same link on the internet some hours ago. Thanks!
– MrBuggy
Nov 26 '18 at 16:02
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
This seems to be also a bug of a specific firefox version: I'm on Windows 10 and my firefox is 63.0.3 (64-Bit). My collegue has the same issue on a Macbook with the same firefox version, while another collegue does not have this bug on a different version.
– MrBuggy
Nov 27 '18 at 7:41
add a comment |
Try this:
CSS
.button{
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer - Edge */
user-select: none; /* Chrome and Opera */
}
The user-select property specifies whether the text of an element can
be selected.
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
add a comment |
Try this:
CSS
.button{
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer - Edge */
user-select: none; /* Chrome and Opera */
}
The user-select property specifies whether the text of an element can
be selected.
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
add a comment |
Try this:
CSS
.button{
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer - Edge */
user-select: none; /* Chrome and Opera */
}
The user-select property specifies whether the text of an element can
be selected.
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
Try this:
CSS
.button{
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer - Edge */
user-select: none; /* Chrome and Opera */
}
The user-select property specifies whether the text of an element can
be selected.
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
answered Nov 26 '18 at 13:17
javimovijavimovi
328110
328110
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
add a comment |
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
I tried it, but the issue is still there... I'm using Windows 10... A friend of mine tried it on Firefox Mac and he can not reproduce the issue, it looks the same as on chrome...
– MrBuggy
Nov 26 '18 at 13:32
add a comment |
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%2f53481654%2fremove-double-outline-on-button-and-its-text-inside%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
