Как убрать браузерную обводку у кнопок (появляющуюся в состоянии :focus) в Chrome и Firefox?

Question

[zdrvstvt]

У кнопок из Bootstrap 3 - при клике на кнопку появляется браузерная обводка (синяя обводка - в Chrome ; и черная пунктирная обводка - в Firefox )

*Аналогичная ситуация (если хотим эту браузерную обводку убрать) в случае с ссылками и инпутами решается с помощью css-стиля:

a:active, a:focus { outline: none; }

input, textarea {outline:none;}
input:active, textarea:active {outline:none;}
:focus {outline:none;}
textarea {resize:none;}
textarea {resize:vertical;}
textarea {resize:horizontal;}

Однако в случае именно с кнопками (button) - просто применение стиля :focus { outline: none; } не помогает.

Что делать, чтобы убрать браузерную обводку у кнопок (появляющуюся в состоянии :focus ) в Chrome и Firefox?

Прикладываю пример кнопки:
jsfiddle.net/r4mef13v/1

(*в jsfiddle при клике на кнопку в фаерфоксе - почему-то нежелательная пунктирная обводка не отображается, хотя на самом деле она есть)

Answer 1

[Евгений Петров]

jsfiddle.net/r4mef13v/3
Про FF и рамки.

button:active, button:focus {
	outline: none;
}
button::-moz-focus-inner {
	border: 0;
}

Answer 2

[zdrvstvt]

*В итоге заработало с использованием кода, предложенного Евгений Петров , но только с обязательным применением " !important " (возможно иначе другие стили перекрывали):

button:active, button:focus {
  outline: none !important;
}
button::-moz-focus-inner {
  border: 0 !important;
}

Answer 3

[Владимир]

для bootstrap 4 (100% рабочий вариант):

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
outline: 0!important;
outline-color: transparent!important;
outline-width: 0!important;
outline-style: none!important;
box-shadow: 0 0 0 0 rgba(0,123,255,0)!important;
}

Comments

[Aiode]

Спасибо самый эффективный способ!

[Akbar Hasanov]

Спасибо, ты лучший!

[fildenis]

Супер ответ! Для Bootstrap 5.* тоже работает

[Андрей П.]

Спасибо!

Answer 4

[Res-media]

Тоже была проблема со свечением во всех браузерах с таким вот кодом, но там еще JS:

<span tabindex="100" title="Показать/скрыть пароль" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span>

Мне помогло это:

:focus {
    outline-style: none;
    outline-width: 0px !important;
    outline-color: none !important;
}

А с этим:
:focus {outline:none;}
так просто не вышло и примеры тоже не помогли...

Answer 5

[Ilya Korablev]

border: none

А еще лучше normalize.css или reset.css подключите

Answer 6

[ArturSitnikoff]

:active,:hover,:focus{outline:0;outline-offset:0}

Answer 7

[crazy-coder]

Для Bootstrap 4 чтобы убрать обводку у чекбоксов и радиокнопок мне помогло, в Opera и Chrome
input[type="checkbox"]:focus,
input[type="radio"]:focus {
visibility: hidden;
}

Answer 8

[Дмитрий]

Css outline:none; для любых состояний?!

Answer 9

[cane]

Черный Бордер над Сабмитом - старая статейка

Answer 10

[Вадим Круглов]

:focus {outline: none !important;}
::-moz-focus-inner {border: 0px !important;}

Answer 11

[liavelaxakoz]

.btn:focus {
outline: none;
box-shadow: none;
}

Answer 12

[Magic_Moment]

мне помогло это:

.navbar:hover, .navbar:focus {
outline: none;
}

Answer 13

[Виталий Разумовский]

Решает мою проблему в Google Chrome.

.form-control:focus{
    box-shadow: none;
}