Я добавил это, но при нажатии кнопки появляется синий контур.
.btn:focus {
outline: none;
}
как удалить эту уродливую вещь?
Я добавил это, но при нажатии кнопки появляется синий контур.
.btn:focus {
outline: none;
}
как удалить эту уродливую вещь?
Возможно, ваши свойства будут переопределены.
Попробуйте добавить !important
к вашему коду вместе с: active.
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
Также добавьте shadow-shadow, потому что иначе вы все равно увидите кнопку shadow вокруг.
В последней версии Bootstrap я обнаружил, что удаление контура не работает. И я должен добавить это, потому что есть также коробка-тень:
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}
Есть встроенный класс boostrap shadow-none
для отключения box-shadow
(не outline
) (https://getbootstrap.com/docs/4.1/utilities/shadows/). Это удаляет тень кнопки:
<button class='btn btn-primary shadow-none'>Example button</button>
Попробуйте ниже код
.button:active,
button:active,
.button:focus,
button:focus,
.button:hover,
button:hover{
border:none !important;
outline:none !important;
}
Это происходило со мной в Chrome (хотя и не в Firefox). Я узнал, что свойство outline
устанавливалось Bootstrap как outline: 5px auto -webkit-focus-ring-color;
. Решенный путем переопределения свойства outline
позже в моем пользовательском CSS следующим образом:
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 0;
}
это решит кнопку с текстом, кнопка только значок или кнопка - это ссылка:
<!--1. button with a text -->
<button type="button" class="btn btn-success" id="newWord">Save</button>
<!--2. button only with a close icon -->
<button type="button" class="close"></button>
<!--3. button is a link -->
<a class="btn btn-success btn-xs" href="#">Save</a>
button,
button:active,
button:focus,
button:hover,
.btn,
.btn:active,
.btn:focus,
.btn:hover{
outline:none !important;
}
если вы добавите border:none !important;
{
border:none !important;
outline:none !important;
}
тогда кнопка будет уменьшаться при нажатии.
Попробуй это
.btn
{
box-shadow: none;
outline: none;
}
В Bootstrap 4 они используют box-shadow: 0 0 0 0px rgba(0,123,255,0);
на: focus, если я решил мою проблему с
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;
outline-color: transparent;
outline-width: 0;
outline-style: none;
box-shadow: 0 0 0 0 rgba(0,123,255,0);
}
Вам нужно использовать правильное вложение, а затем применить к нему стили.
Щелкните правой кнопкой мыши по кнопке и найдите для нее точный класс (используя элемент Firebug для Firefox), (проверяйте элемент для chrome).
Добавьте стиль в целую кучу класса. Только тогда это сработает
Я нашел это весьма полезным в моем случае после нажатия кнопки.
$('#buttonId').blur();
Я решил просто удалить ширину границы на :focus
. Это удаляет уродливое пространство между контуром и закругленными углами кнопки. По какой-то причине эта проблема возникает только на реальных элементах кнопки, а не на элементах <a class="btn">
.
button.btn:focus {
border-width: 0;
}
Это может помочь, если у кого-то еще этот вопрос не решен.
(function() {
$('button').on('click', function() {
$("#action").html("button was clicked");
console.log("the button was clicked");
});
})();
.btn-clear {
background-color: transparent !important;
border-style: none !important;
cursor: pointer;
}
.btn-clear:active,
.btn-clear:focus {
outline-style: none !important;
outline-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>
<label id="action"></label>
У меня была одна и та же проблема, и для меня работал следующий код:
.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
outline: none !important;
}
.btn {
margin:32px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<button type="button" class="btn btn-default">Button</button>
Здесь мое решение Boostrap 4 для удаления контура кнопки
/*
* Boostrap 4
* Remove blue outline from button
*/
.btn:focus,
.btn:active {
box-shadow: none;
}
a:focus {
outline: none;
}
это работает для меня на BS3
Этот работал для меня в Bootstrap 4:
.btn {border-color: transparent;}
На самом деле в начальной загрузке определены все переменные для всех случаев. В вашем случае вам просто нужно переопределить переменную по умолчанию "$ input-btn-focus-box-shadow" из файла "_variables.scss". $input-btn-focus-box-shadow: none;
так: $input-btn-focus-box-shadow: none;
Обратите внимание, что вам нужно переопределить эту переменную в своем собственном пользовательском _yourCusomVarsFile.scss. И этот файл должен быть импортирован в проект в первом порядке, а затем загружен так:
@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";
Самозагрузка vars идет с флагом '! Default'.
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
Таким образом, в вашем файле вы переопределите значения по умолчанию. Вот иллюстрация:
$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
Самый первый вариант имеет больший приоритет, чем второй. То же самое касается остальных состояний и случаев. Надеюсь, это поможет вам.
Вот файл "_variable.scss" из репозитория, где вы можете найти все начальные значения из начальной загрузки: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
Chears
Имейте в виду, что если вы находитесь внутри якоря, например:
<a href='some_link'>
<button class='btn'>Button</button>
</a>
Добавление стиля к самой кнопке может быть недостаточным, вам, возможно, потребуется добавить правила CSS a:focus, a:active { outline: none }
(это сработало для меня).
Попробуйте ниже
.bootstrap-select .dropdown-toggle:focus
{
outline: 0 !important;
}
Иногда {outline: 0}
не решает проблему, и мы можем попробовать {box-shadow: none;}
Я использую bootstrap 4, вы можете использовать контур и коробку-тень.
#buttonId {
box-shadow: none;
outline: none;
}
Или, если кнопка находится внутри элемента, такого как div без фона, достаточно тени для окна.
#buttonId {
box-shadow: none;
}
Если вы используете версию 4.3 или выше, ваш код не будет работать должным образом. Это то, что я использовал. Это сработало для меня.
.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
Здесь используется не-CSS-метод. Используя JQuery, просто удаляйте класс "focus" всякий раз, когда элемент был нажат.
$(".btn").mousemove(function(element) {
$(this).removeClass("focus");
});
Этот метод может привести к возникновению границы, а затем коротко вернуться, что, на мой взгляд, выглядит нехорошо (это похоже на часть ответа при нажатии кнопки).
Причина, по которой я использовал .mousemove(), в том, что .click() и .mouseup() оказались неэффективными.
Изменение этих значений сработало для меня. Я нашел это, взглянув на Инструменты разработчика Chrome
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: /*Change This*/;
border-color: /*Change This*/;
}
Это также сохраняет тень кнопки, она только меняет цвет кнопки при нажатии.
Переопределите точные операторы начальной загрузки:
.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
box-shadow: none;
}
Вместо нацеливания на класс кнопки (.btn), здесь я нацеливаюсь на сам элемент кнопки, и он работает для меня.
button:focus {
outline:none !important;
box-shadow:none !important;
}
И может использовать класс shadow-none
для поля ввода
Попробуйте
.btn-primary:focus {
box-shadow: none !important;
}
очень просто:
.btn {outline: none;}