Annoying Blue Highlighting around div after click
When I click on the tab button im left with this annoying blue highlight around the div... Ive read in other forums that I should add the following to divs with this problem, but it is not working.
.noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
You can get a closer look here http://omarhabash.com/nova/?page_id=28
html css html5 css3
asked Aug 19 '14 at 21:24
Omar
8441124
add a comment |
When I click on the tab button im left with this annoying blue highlight around the div... Ive read in other forums that I should add the following to divs with this problem, but it is not working.
.noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
You can get a closer look here http://omarhabash.com/nova/?page_id=28
html css html5 css3
asked Aug 19 '14 at 21:24
Omar
8441124
1
Please DO NOT link to external resources that can change. It ruins the value of your question to others. See: meta.stackoverflow.com/questions/125997/…
– Diodeus - James MacFarlane
Aug 19 '14 at 21:25
2
@Diodeus Well, in this case he included an image and some code, and then for additional reference he added the link. So it's a lot better then just including the link.
– Dan
Aug 19 '14 at 21:47
add a comment |
When I click on the tab button im left with this annoying blue highlight around the div... Ive read in other forums that I should add the following to divs with this problem, but it is not working.
.noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
You can get a closer look here http://omarhabash.com/nova/?page_id=28
html css html5 css3
asked Aug 19 '14 at 21:24
Omar
8441124
When I click on the tab button im left with this annoying blue highlight around the div... Ive read in other forums that I should add the following to divs with this problem, but it is not working.
.noSelect {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
You can get a closer look here http://omarhabash.com/nova/?page_id=28
html css html5 css3
html css html5 css3
asked Aug 19 '14 at 21:24
Omar
8441124
asked Aug 19 '14 at 21:24
Omar
8441124
asked Aug 19 '14 at 21:24
Omar
8441124
asked Aug 19 '14 at 21:24
Omar
8441124
asked Aug 19 '14 at 21:24
Omar
8441124
8441124
1
Please DO NOT link to external resources that can change. It ruins the value of your question to others. See: meta.stackoverflow.com/questions/125997/…
– Diodeus - James MacFarlane
Aug 19 '14 at 21:25
2
@Diodeus Well, in this case he included an image and some code, and then for additional reference he added the link. So it's a lot better then just including the link.
– Dan
Aug 19 '14 at 21:47
add a comment |
1
Please DO NOT link to external resources that can change. It ruins the value of your question to others. See: meta.stackoverflow.com/questions/125997/…
– Diodeus - James MacFarlane
Aug 19 '14 at 21:25
2
@Diodeus Well, in this case he included an image and some code, and then for additional reference he added the link. So it's a lot better then just including the link.
– Dan
Aug 19 '14 at 21:47
1
1
Please DO NOT link to external resources that can change. It ruins the value of your question to others. See: meta.stackoverflow.com/questions/125997/…
– Diodeus - James MacFarlane
Aug 19 '14 at 21:25
Please DO NOT link to external resources that can change. It ruins the value of your question to others. See: meta.stackoverflow.com/questions/125997/…
– Diodeus - James MacFarlane
Aug 19 '14 at 21:25
2
2
@Diodeus Well, in this case he included an image and some code, and then for additional reference he added the link. So it's a lot better then just including the link.
– Dan
Aug 19 '14 at 21:47
@Diodeus Well, in this case he included an image and some code, and then for additional reference he added the link. So it's a lot better then just including the link.
– Dan
Aug 19 '14 at 21:47
add a comment |
3 Answers
3
active
oldest
votes
Add this to your css file!
.btn-group-justified > .btn-group .btn {
width: 100%;
outline: none;
}
UPDATE:
Always use this every time to avoid these kind of issues.
*:focus {
outline: 0;
outline: none;
}
answered Aug 19 '14 at 21:45
YOU
5331319
add a comment |
That appears to be the outline. It is default browser functionality for accessibility. You can change the style using the outline property.
Something like this for example:
.class {
outline:none;
}
Some Resources:
- https://developer.mozilla.org/en-US/docs/Web/CSS/outline
- http://css-tricks.com/almanac/properties/o/outline/
- http://www.w3.org/TR/CSS21/ui.html
Demo:
Press tab and you will see the outline when you tab over the link.
http://jsfiddle.net/gzmnbfem/
Outline Removed Demo:
Press tab and you will see no outline. However this is not a recommended approach as it breaks accessibility.
http://jsfiddle.net/gzmnbfem/1/
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
add a comment |
Use this class:
.noSelect {
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
answered Nov 19 '18 at 8:28
quas
4119
3
Please explain your answer
– Mike
Nov 19 '18 at 8:47
2
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
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%2f25393214%2fannoying-blue-highlighting-around-div-after-click%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
Add this to your css file!
.btn-group-justified > .btn-group .btn {
width: 100%;
outline: none;
}
UPDATE:
Always use this every time to avoid these kind of issues.
*:focus {
outline: 0;
outline: none;
}
answered Aug 19 '14 at 21:45
YOU
5331319
add a comment |
Add this to your css file!
.btn-group-justified > .btn-group .btn {
width: 100%;
outline: none;
}
UPDATE:
Always use this every time to avoid these kind of issues.
*:focus {
outline: 0;
outline: none;
}
answered Aug 19 '14 at 21:45
YOU
5331319
add a comment |
Add this to your css file!
.btn-group-justified > .btn-group .btn {
width: 100%;
outline: none;
}
UPDATE:
Always use this every time to avoid these kind of issues.
*:focus {
outline: 0;
outline: none;
}
answered Aug 19 '14 at 21:45
YOU
5331319
Add this to your css file!
.btn-group-justified > .btn-group .btn {
width: 100%;
outline: none;
}
UPDATE:
Always use this every time to avoid these kind of issues.
*:focus {
outline: 0;
outline: none;
}
answered Aug 19 '14 at 21:45
YOU
5331319
edited Aug 20 '14 at 1:49
answered Aug 19 '14 at 21:45
YOU
5331319
answered Aug 19 '14 at 21:45
YOU
5331319
answered Aug 19 '14 at 21:45
YOU
5331319
5331319
add a comment |
add a comment |
That appears to be the outline. It is default browser functionality for accessibility. You can change the style using the outline property.
Something like this for example:
.class {
outline:none;
}
Some Resources:
- https://developer.mozilla.org/en-US/docs/Web/CSS/outline
- http://css-tricks.com/almanac/properties/o/outline/
- http://www.w3.org/TR/CSS21/ui.html
Demo:
Press tab and you will see the outline when you tab over the link.
http://jsfiddle.net/gzmnbfem/
Outline Removed Demo:
Press tab and you will see no outline. However this is not a recommended approach as it breaks accessibility.
http://jsfiddle.net/gzmnbfem/1/
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
add a comment |
That appears to be the outline. It is default browser functionality for accessibility. You can change the style using the outline property.
Something like this for example:
.class {
outline:none;
}
Some Resources:
- https://developer.mozilla.org/en-US/docs/Web/CSS/outline
- http://css-tricks.com/almanac/properties/o/outline/
- http://www.w3.org/TR/CSS21/ui.html
Demo:
Press tab and you will see the outline when you tab over the link.
http://jsfiddle.net/gzmnbfem/
Outline Removed Demo:
Press tab and you will see no outline. However this is not a recommended approach as it breaks accessibility.
http://jsfiddle.net/gzmnbfem/1/
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
add a comment |
That appears to be the outline. It is default browser functionality for accessibility. You can change the style using the outline property.
Something like this for example:
.class {
outline:none;
}
Some Resources:
- https://developer.mozilla.org/en-US/docs/Web/CSS/outline
- http://css-tricks.com/almanac/properties/o/outline/
- http://www.w3.org/TR/CSS21/ui.html
Demo:
Press tab and you will see the outline when you tab over the link.
http://jsfiddle.net/gzmnbfem/
Outline Removed Demo:
Press tab and you will see no outline. However this is not a recommended approach as it breaks accessibility.
http://jsfiddle.net/gzmnbfem/1/
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
That appears to be the outline. It is default browser functionality for accessibility. You can change the style using the outline property.
Something like this for example:
.class {
outline:none;
}
Some Resources:
- https://developer.mozilla.org/en-US/docs/Web/CSS/outline
- http://css-tricks.com/almanac/properties/o/outline/
- http://www.w3.org/TR/CSS21/ui.html
Demo:
Press tab and you will see the outline when you tab over the link.
http://jsfiddle.net/gzmnbfem/
Outline Removed Demo:
Press tab and you will see no outline. However this is not a recommended approach as it breaks accessibility.
http://jsfiddle.net/gzmnbfem/1/
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
edited Aug 19 '14 at 21:31
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
answered Aug 19 '14 at 21:26
Kris Hollenbeck
12.7k165186
12.7k165186
add a comment |
add a comment |
Use this class:
.noSelect {
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
answered Nov 19 '18 at 8:28
quas
4119
3
Please explain your answer
– Mike
Nov 19 '18 at 8:47
2
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
add a comment |
Use this class:
.noSelect {
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
answered Nov 19 '18 at 8:28
quas
4119
3
Please explain your answer
– Mike
Nov 19 '18 at 8:47
2
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
add a comment |
Use this class:
.noSelect {
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
answered Nov 19 '18 at 8:28
quas
4119
Use this class:
.noSelect {
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
answered Nov 19 '18 at 8:28
quas
4119
edited Nov 20 '18 at 9:25
answered Nov 19 '18 at 8:28
quas
4119
answered Nov 19 '18 at 8:28
quas
4119
answered Nov 19 '18 at 8:28
quas
4119
4119
3
Please explain your answer
– Mike
Nov 19 '18 at 8:47
2
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
add a comment |
3
Please explain your answer
– Mike
Nov 19 '18 at 8:47
2
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
3
3
Please explain your answer
– Mike
Nov 19 '18 at 8:47
Please explain your answer
– Mike
Nov 19 '18 at 8:47
2
2
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.
– FrankerZ
Nov 19 '18 at 10:01
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f25393214%2fannoying-blue-highlighting-around-div-after-click%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
1
Please DO NOT link to external resources that can change. It ruins the value of your question to others. See: meta.stackoverflow.com/questions/125997/…
– Diodeus - James MacFarlane
Aug 19 '14 at 21:25
2
@Diodeus Well, in this case he included an image and some code, and then for additional reference he added the link. So it's a lot better then just including the link.
– Dan
Aug 19 '14 at 21:47