Задать вопрос
@zdrvstvt
css

Как убрать браузерную обводку у кнопок (появляющуюся в состоянии :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 при клике на кнопку в фаерфоксе - почему-то нежелательная пунктирная обводка не отображается, хотя на самом деле она есть)
  • Вопрос задан
  • 159517 просмотров
Комментировать
Подписаться 6 Простой Комментировать
Решения вопроса 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;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 11
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;
}
Ответ написан
4 комментария
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;}
так просто не вышло и примеры тоже не помогли...
Ответ написан
Комментировать
Комментировать
swipeshot
@swipeshot
Учусь на ошибках.
border: none

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

.navbar:hover, .navbar:focus {
outline: none;
}
Ответ написан
Комментировать
Комментировать
vetalgb
@vetalgb
Решает мою проблему в Google Chrome. 
.form-control:focus{
    box-shadow: none;
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Исправление ошибок в работе вебсайта / Доработка интернет-магазина
24 апр. 2024, в 02:51
50000 руб./за проект
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Ещё заказы