У моих кнопок есть подсветка вокруг них после нажатия на них. Это находится в Chrome.
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
Я использую Bootstrap с темой, но я уверен, что не это: я замечал это раньше в другом проекте.
Это исчезает, если я использую тег <a> вместо <button>. Зачем? Если бы я хотел использовать <button>, как бы я его убрал?
Я нашел эти Q и A на другой странице, и переопределение стиля фокуса кнопки сработало для меня. Эта проблема может быть специфичной для MacOS с Chrome.
.btn:focus {
outline: none;
}
Обратите внимание, что это имеет значение для доступности и не рекомендуется, пока у вас не будет хорошего согласованного состояния фокусировки для ваших кнопок и входов. В соответствии с комментариями ниже, есть пользователи, которые не могут использовать мышей.
Вам нужно что-то вроде:
<button class="btn btn-primary btn-block" onclick="this.blur();">...
Метод .blur() корректно удаляет выделение фокуса и не путает стили Bootstraps.
Я понимаю, что фокус сначала применяется после события onMouseDown, поэтому вызов e.preventDefault() в onMouseDown может быть чистым решением в зависимости от ваших потребностей. Это, безусловно, удобное для доступа решение, но, очевидно, оно регулирует поведение щелчков мыши, которые могут быть несовместимы с вашим веб-проектом.
В настоящее время я использую это решение (в рамках проекта react-bootstrap), и я не получаю фокус мерцания или удерживания фокуса кнопок после щелчка, но я все еще могу включить мой фокус и визуально визуализировать фокус те же кнопки.
Хотя легко просто удалить контур для всех выделенных кнопок (как в ответе пользователя 1933897), но это решение является плохим с точки зрения доступности (например, см. " Остановка обмена сообщениями с контуром фокусировки браузера по умолчанию")
С другой стороны, возможно, невозможно убедить ваш браузер прекратить стилизовать нажатую кнопку как выделенную, если она думает, что она сфокусировалась после того, как вы нажали на нее (я смотрю на вас, Chrome на OS X).
Так что мы можем сделать? Несколько вариантов приходят мне на ум.
1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })
Вы указываете своему браузеру, что нужно убрать фокус с любой кнопки сразу после нажатия кнопки. Используя mouseup вместо click мы сохраняем поведение по умолчанию для взаимодействия на основе клавиатуры (mouseup не запускается клавиатурой).
2) CSS: .btn:hover { outline: 0 !important }
Здесь вы отключаете контур только для наведенных кнопок. Очевидно, что это не идеально, но может быть достаточно в некоторых ситуациях.
Не могу поверить, что никто еще не опубликовал это.
Используйте ярлык вместо кнопки.
<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>
Это работает для меня, другое решение не упомянуто. Просто бросьте его в событие click...
$(this).trigger("blur");
Или вызвать его из другого события/метода...
$(".btn_name").trigger("blur");
Если вы используете правило :focus { outline: none; } для удаления контуров, ссылка или управление будут фокусируемыми, но без указания фокуса для пользователей клавиатуры. Способы его удаления с помощью JS, например, onfocus="blur()", еще хуже, и пользователь клавиатуры не сможет взаимодействовать с элементом управления.
Используемые хаки, которые вид OK, включают добавление правил :focus { outline: none; }, когда пользователи взаимодействуют с мышью и удаляют их снова, если обнаружено взаимодействие с клавиатурой. Линдсей Эванс сделал для этого lib: https://github.com/lindsayevans/outline.js
Но я бы предпочел установить класс в теге html или body. И иметь контроль в файле CSS, когда использовать это.
Например (встроенные обработчики событий предназначены только для демонстрации):
<html>
<head>
<style>
a:focus, button:focus {
outline: 3px solid #000;
}
.no-focus a, .no-focus button {
outline: none;
}
</style>
</head>
<body id="thebody"
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
<p>This her is <a href="#">a link</a></p>
<button>Click me</button>
</body>
</html>
Я поставил togheter a Pen: http://codepen.io/snobojohan/pen/RWXXmp
Но будьте осторожны, есть проблемы с производительностью. Это заставляет перекрашивать каждый раз, когда пользователь переключается между мышью и клавиатурой. Подробнее об устранении ненужных красок http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
Это сработало для меня. Я создал собственный класс, который переопределяет необходимый CSS.
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
-Webkit-box-shadow будет работать для браузеров Chrome и Safari.
Я заметил то же самое, и хотя это меня действительно раздражает, я считаю, что нет правильного способа справиться с этим.
Я бы рекомендовал использовать все остальные решения, потому что они полностью уничтожают доступность кнопки, поэтому теперь, когда вы нажимаете кнопку, вы не получите ожидаемого фокуса.
Этого следует избегать!
.btn:focus {
outline: none;
}
Поздно, но кто знает, что это может кому-то помочь. CSS будет выглядеть так:
.rhighlight{
outline: none !important;
box-shadow:none
}
HTML будет выглядеть так:
<button type="button" class="btn btn-primary rHighlight">Text</button>
Таким образом вы можете сохранить btn и связанные с ним поведения.
Я нахожу решение. когда мы фокусируемся, при начальной загрузке используется box-shadow, поэтому мы просто отключаем его (недостаточно репутации, невозможно загрузить изображение :().
Я добавляю
.btn:focus{
box-shadow:none !important;
}
это работает.
Если вышеуказанное не работает для вас, попробуйте следующее:
.btn: focus {outline: none; box-shadow: none; border: 2px solid прозрачный;}
Как указал user1933897, это может быть специфично для MacOS с Chrome.
Я упомянул об этом в комментарии выше, но для ясности это нужно перечислять как отдельный ответ. Пока вам не нужно фокусироваться на кнопке, вы можете использовать фокусное событие, чтобы удалить его, прежде чем он сможет применить любые эффекты CSS:
$('buttonSelector').focus(function(event) {
event.target.blur();
});
Это позволяет избежать мерцания, которое можно увидеть при использовании события click. Это ограничивает интерфейс, и вы не сможете войти в эту кнопку, но это не проблема во всех приложениях.
Стиль
.not-focusable:focus {
outline: none;
box-shadow: none;
}
Использование
<button class="btn btn-primary not-focusable">My Button</button>
У нас была аналогичная проблема, и мы заметили, что Bootstrap 3 не имеет проблемы на их вкладках (в Chrome). Похоже, что они используют outline-style, что позволяет браузеру решать, что лучше делать, и Chrome, похоже, делает то, что вы хотите: покажите если вы просто нажали на элемент.
Поддержка outline-style трудно настроить, так как браузер принимает решение о том, что это значит. Лучше всего проверить несколько браузеров и иметь правило возврата.
Другим возможным решением является добавление класса с помощью Javascript-прослушивателя, когда пользователь нажимает на кнопку, а затем удаляет этот класс в фокусе с другим слушателем. Это поддерживает доступность (видимая вкладка), а также предотвращает необычное поведение Chrome при выборе кнопки, сфокусированной при нажатии.
JS:
$('button').click(function(){
$(this).addClass('clicked');
});
$('button').focus(function(){
$(this).removeClass('clicked');
});
CSS
button:focus {
outline: 1px dotted #000;
}
button.clicked {
outline: none;
}
Полный пример: https://jsfiddle.net/4bbb37fh/
Попробуйте это решение для удаления рамки вокруг кнопки. Добавьте этот код в css.
Попробуйте
button:focus{
outline:0px;
}
Если не работает, используйте ниже.
button:focus{
outline:none !important;
}
Это работа, я надеюсь помочь вам.
.btn:focus, .btn:focus:active {
outline: none;
}
Это работает лучше всего
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
Добавьте это в CSS:
*, ::after, ::before {
box-sizing: border-box;
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Для людей, которым нужен чистый способ CSS:
:focus:not(:focus-visible) { outline: none }
Это также может работать для ссылки и так далее, и бонус, он сохраняет доступность клавиатуры. Наконец, это игнорируется браузерами, которые не поддерживают: focus-visible
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
этот план: ни один не будет работать для кнопки и тега
.btn:focus:active {
outline: none;
}
это удаляет контур при щелчке, но сохраняет фокус при табуляции (для a11y)
У меня была такая же проблема в MacOS и Chrome, когда вы использовали кнопку для запуска события перехода. Если кто-либо читает это, уже использует прослушиватель событий, вы можете решить его, вызвав .blur() после ваших действий.
Пример:
nextQuestionButtonEl.click(function(){
if (isQuestionAnswered()) {
currentQuestion++;
changeQuestion();
} else {
toggleNotification("invalidForm");
}
this.blur();
});
Хотя, если вы уже не используете прослушиватель событий, добавление одного только для его решения может привести к излишним накладным расходам, и лучше будет использовать решение для стилизации, как и предыдущие ответы.
Вы можете установить tabIndex="-1". Это заставит браузер пропускать эту кнопку, когда вы нажимаете клавишу TAB через фокусируемые элементы управления.
Другие "исправления", предложенные здесь, только удаляют контур фокуса, но все еще оставляют кнопки на вкладке. Однако, с точки зрения удобства использования, вы уже убрали свечение, поэтому ваш пользователь в любом случае не будет знать, какая кнопка в данный момент находится в фокусе.
С другой стороны, создание кнопки без табуляции имеет последствия для доступности.
Я использую его для удаления контура фокуса с кнопки X в bootstrap modal, у которого в любом случае есть дублирующая кнопка "Закрыть" внизу, поэтому мое решение не влияет на доступность.
Если вы используете браузер webkit (и, возможно, браузер, совместимый с префиксом поставщика webkit), этот контур принадлежит псевдоклассу button -webkit-focus-ring. Просто установите его outline на none:
*:-webkit-focus-ring {
outline: none;
}
Chrome - это такой веб-браузер, и этот эффект также встречается и в Linux (не только в MacOS, хотя некоторые стили Chrome являются только MacOS)
У меня возникла та же проблема с использованием <a> действующей как кнопка, и я обнаружил, что пропускаю обходной путь, добавив attr type="button" по крайней мере, он ведет себя нормально.
<a type="button" class="btn btn-primary">Release Me!</a>
непосредственно в теге html (в сценарии, где вы можете оставить тему начальной загрузки в другом месте вашего дизайна)..
примеры, чтобы попробовать..
<button style="border: transparent;">
<button style="border: 1px solid black;">
..ect ,. в зависимости от желаемого эффекта.
Для пользователей sass Bootstrap 4 должен управляться переопределением переменных.
Если вы хотите отключить тень блока при фокусировке вокруг кнопок:
$btn-focus-box-shadow: none;
Вы также можете отключить тень блока при фокусировке вокруг входов с помощью:
$input-focus-box-shadow: none;
Или обе с одной переменной:
$input-btn-focus-box-shadow: none;
Просто добавьте outline:0; css к элементам.