Annoying Blue Highlighting around div after click

Question

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

Answer 1

Use this class:

.noSelect {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}

Answer 2

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;
}

Answer 3

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/