Кнопка Bootstrap отключена outline

Question

Я использую bootstrap для моего проекта и не люблю кнопку с синим контуром при нажатии на нее, как отключить синий контур?

Answer 1

Для кнопок, вам необходимо изменить свойство контура на сфокусированных кнопок. Это будет работать для вас

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

Взгляните на эту CodePen, чтобы увидеть его в действии. Надеюсь это поможет.

Answer 2

Некоторые браузеры добавить такую ​​рамку сами по себе, то трудно удалить его. Но Bootstrap также добавляет такую ​​синюю границу к некоторым элементам ввода формы. Есть несколько вопросов с ответами о том, как их изменить, например How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?. В вашем случае вы можете установить border: none;, чтобы попытаться его удалить. Но, как я уже сказал, это может быть функция браузера и не связана с Bootstrap, поэтому вам просто нужно попробовать.

Answer 3

Добавить в свой CSS этот код:

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

(изменить цвет границы, если вы хотите)