0

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?

bootstrap button

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
user1434702
  • 817
  • 1
  • 14
  • 33

3 Answers3

0

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.

Community
  • 1
  • 1
cello
  • 5,356
  • 3
  • 23
  • 28
0

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)

0

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.

Bart Jedrocha
  • 11,450
  • 5
  • 43
  • 53