Bootstrap button disabled outline

Question

i'm using bootstrap for my project, and don't like the button that has a blue outline when pressed it, how to disabled the blue outline?

Answer 1

Some browsers add such a border by themselves, then it is hard to remove it. But Bootstrap also adds such a blue border to some form-input elements. There are several questions with answers on how to modify it, for example How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?. In your case, you could set border: none; to try to remove it. But as I said, it might also be a browser feature, and not related to Bootstrap, so you just have to try it out.

Answer 2

Add into your css this code:

.form-control:focus {
  border-color: #ccc;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

(Change border color if you want)

Answer 3

For buttons, you'll need to modify the outline property on focused buttons. This will work for you

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 0;
}

Take a look at this CodePen to see it in action. Hope this helps.