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

У кнопок из 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 при клике на кнопку в фаерфоксе - почему-то нежелательная пунктирная обводка не отображается, хотя на самом деле она есть)
  • Вопрос задан
  • 102939 просмотров
Решения вопроса 2
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
jsfiddle.net/r4mef13v/3
Про FF и рамки.

button:active, button:focus {
	outline: none;
}
button::-moz-focus-inner {
	border: 0;
}
Ответ написан
@zdrvstvt Автор вопроса
*В итоге заработало с использованием кода, предложенного Евгений Петров , но только с обязательным применением " !important " (возможно иначе другие стили перекрывали):

button:active, button:focus {
  outline: none !important;
}
button::-moz-focus-inner {
  border: 0 !important;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 10
wprivalov
@wprivalov
Разрабатываю на Yii2
для 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;
}
Ответ написан
@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;}
так просто не вышло и примеры тоже не помогли...
Ответ написан
swipeshot
@swipeshot
Учусь на ошибках.
border: none

А еще лучше normalize.css или reset.css подключите
Ответ написан
@ArturSitnikoff
Служба заботы о пользователях Internet
:active,:hover,:focus{outline:0;outline-offset:0}
Ответ написан
thewind
@thewind
php программист, front / backend developer
Css outline:none; для любых состояний?!
Ответ написан
@crazy-coder
Для Bootstrap 4 чтобы убрать обводку у чекбоксов и радиокнопок мне помогло, в Opera и Chrome
input[type="checkbox"]:focus,
input[type="radio"]:focus {
visibility: hidden;
}
Ответ написан
VadimW
@VadimW
Web Developer
:focus {outline: none !important;}
::-moz-focus-inner {border: 0px !important;}
Ответ написан
Magic_Moment
@Magic_Moment
мне помогло это:

.navbar:hover, .navbar:focus {
outline: none;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы