CODEWITHSUNDEEP
csstwitter-bootstrap
Tim A.
Tim A.

Reputation: 23

Bootstrap: remove blue (or whatever color) outline from a focused element

I know this question has been asked multiple times, and yet most answers seemed to work for like half of the people. I am in the half for which this has not worked. You can checkout the project at https://jsfiddle.net/erbnzud1/2/. What I need is for that blue outline to not be shown on focus, so after the button was clicked. As you can see in the CSS, I tried something like this:

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

And many other variations. Let me know if you have any suggestions.

Thanks!

EDIT: This is the current solution that works: https://jsfiddle.net/erbnzud1/3/

Created this css class which I have added to my elements as per the help I got in the answer to my question:

.noFocus,.noFocus:focus,.noFocus:active {
   outline: none !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

Upvotes: 0

Views: 1255

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

It is the label outline (the square one). add label to your css rule to remove outline:

label, .btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
}

Upvotes: 1

Related Questions