it-swarm.com.ru

Как убрать фокус с кнопок при нажатии

Все мои кнопки выделяются вокруг них после того, как я нажимаю на них. Это в Хроме.

UnselectedSelected

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Я использую Bootstrap с темой, но я уверен, что это не так: раньше я замечал это в другом проекте. 

Он исчезнет, ​​если я использую тег <a> вместо <button>. Зачем? Если бы я хотел использовать <button>, как бы он ушел?

152
Sean Clark Hess

Я нашел эти вопросы и ответы на другой странице, и переопределение стиля фокуса кнопки сработало для меня. Эта проблема может быть характерна для MacOS с Chrome.

.btn:focus {
  outline: none;
}

Обратите внимание, что это имеет значение для доступности и не рекомендуется, пока у вас не будет хорошего согласованного состояния фокуса для ваших кнопок и входов. Согласно комментариям ниже, есть пользователи, которые не могут использовать мышей.

215
jerimiah797

Вы хотите что-то вроде:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Метод .blur () правильно удаляет выделение фокуса и не портит стили Bootstraps.

75
cshotton

насколько я понимаю, фокус сначала применяется после события onMouseDown, поэтому вызов e.preventDefault() в onMouseDown может быть чистым решением в зависимости от ваших потребностей. Это, безусловно, удобное решение, но, очевидно, оно регулирует поведение щелчков мыши, которые могут быть несовместимы с вашим веб-проектом.

В настоящее время я использую это решение (в рамках проекта react-bootstrap), и я не получаю мерцание фокуса или удержание фокуса кнопок после щелчка, но я по-прежнему могу перемещать фокус и визуально визуализировать фокус тех же кнопок.

29
pjs

Хотя легко удалить контур для всех выделенных кнопок (как в answer пользователя 1919897), но это решение плохое с точки зрения доступности (например, см. Прекратить работу с фокусом браузера по умолчанию) контур )

С другой стороны, вероятно, невозможно убедить ваш браузер прекратить стилизовать вашу нажатую кнопку как выделенную, если он думает, что она сфокусирована после того, как вы нажали на нее (я смотрю на вас, Chrome на OS X).

Так что мы можем сделать? Несколько вариантов приходят мне на ум.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Вы указываете своему браузеру удалить фокус вокруг любой кнопки сразу после нажатия кнопки. Используя mouseup вместо click, мы сохраняем поведение по умолчанию для взаимодействий на основе клавиатуры (mouseup не запускается клавиатурой).

2) CSS: .btn:hover { outline: 0 !important }

Здесь вы отключаете контур только для кнопок hovered. Очевидно, что это не идеально, но может быть достаточно в некоторых ситуациях.

28
Alexis

Не могу поверить, что никто еще не опубликовал это.

Используйте ярлык вместо кнопки.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Fiddle

26
Adam McKenna

Это работает для меня, другое решение не упомянуто. Просто добавьте это в событие щелчка ...

$(this).trigger("blur");

Или вызвать его из другого события/метода ...

$(".btn_name").trigger("blur");
9
Rob

Если вы используете правило :focus { outline: none; } для удаления контуров, ссылка или элемент управления будут фокусируемыми, но без указания фокуса для пользователей клавиатуры. Методы его удаления, такие как JS, такие как onfocus="blur()", еще хуже и приведут к тому, что пользователи клавиатуры не смогут взаимодействовать с элементом управления.

Взломы, которые вы можете использовать, например вроде OK, включают добавление правил :focus { outline: none; }, когда пользователи взаимодействуют с мышью, и удаление их снова, если обнаружено взаимодействие с клавиатурой. Линдсей Эванс сделал библиотеку для этого: 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>

Я положил вместе ручку: http://codepen.io/snobojohan/pen/RWXXmp

Но будьте осторожны, есть проблемы с производительностью. Это заставляет перекрашивать каждый раз, когда пользователь переключается между мышью и клавиатурой. Подробнее об избежании ненужных красок http://www.html5rocks.com/en/tutorials/speed/unneeded-paints/

7
snobojohan

Это сработало для меня. Я создал собственный класс, который переопределяет необходимый CSS. 

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

 enter image description here

-Webkit-box-shadow будет работать для браузеров Chrome и Safari. 

6
Menaka

Я заметил то же самое, и хотя это действительно раздражает меня, я считаю, что нет никакого правильного способа справиться с этим.

Я бы рекомендовал против всех других приведенных решений, поскольку они полностью убивают доступность кнопки, поэтому теперь, когда вы переходите на кнопку, вы не получите ожидаемого фокуса.

Этого следует избегать!

.btn:focus {
  outline: none;
}
6
Oscar Bolaños

Стиль

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

С помощью

<button class="btn btn-primary not-focusable">My Button</button>
4
Bogdan Kanteruk

Поздно, но кто знает, может кому-то помочь. CSS будет выглядеть так:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML будет выглядеть так:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Таким образом, вы можете сохранить btn и связанные с ним поведения.

4
Stephanie Wyche

Я упоминал об этом в комментарии выше, но для ясности стоит перечислить его как отдельный ответ. Если вам не нужно фокусироваться на кнопке, вы можете использовать событие focus, чтобы удалить ее, прежде чем она сможет применить какие-либо CSS-эффекты:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Это позволяет избежать мерцания, которое можно увидеть при использовании события click. Это ограничивает интерфейс, и вы не сможете перейти к кнопке, но это не проблема для всех приложений.

3
Charles

Попробуйте это решение для удаления границы вокруг кнопки. Добавьте этот код в CSS.

Пытаться  

button:focus{
outline:0px;
}

Если не работает, используйте ниже.

button:focus{
 outline:none !important;
 }
2
Rana Aalamgeer

Другое возможное решение - добавить класс с использованием слушателя 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/

2
Seb Woolford

У нас была похожая проблема, и мы заметили, что Bootstrap 3 Не имеет проблемы на их вкладках (в Chrome). Похоже, что они используют outline-style , который позволяет браузеру решать, что лучше делать, а Chrome, кажется, делает то, что вам нужно: показывать контур в фокусе, если вы просто не нажали на элемент.

Поддержка outline-style трудно определить, поскольку браузер сам решает, что это значит. Лучше всего проверить в нескольких браузерах и иметь запасное правило.

2
TeknoFiend

Если вышеупомянутое не работает для вас, попробуйте это:

.btn: focus {контур: нет; box-shadow: нет; граница: 2px solid прозрачный;}

Как указал user1933897, это может быть характерно для MacOS с Chrome.

2
alns

Это работа, я надеюсь помочь вам

.btn:focus, .btn:focus:active {
    outline: none;
}
2

Для людей, которым нужен чистый способ CSS:

:focus:not(:focus-visible) { outline: none }

Это также может работать для ссылки и так далее, и бонус, он сохраняет доступность клавиатуры. Наконец, это игнорируется браузерами, которые не поддерживают: focus-visible

1
Martin Pedros

Это работает лучше всего

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
1
Saron

Я нахожу решение . Когда мы фокусируемся, при начальной загрузке используется box-shadow, поэтому мы просто отключаем его (недостаточно репутации, невозможно загрузить изображение :().

Я добавить 

btn:focus{
    box-shadow:none !important;
}

оно работает.

1
toffee
  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

эта схема: ни одна не будет работать для кнопки и тега

1
Milan Panigrahi
.btn:focus:active {
  outline: none;
}

это удаляет контур при щелчке, но сохраняет фокус при табуляции (для a11y)

1
yennefer

Если вам не нужен контур кнопки со всем статусом, вы можете переопределить CSS следующим кодом

.btn.active.focus, .btn.active:focus, 
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus{
  outline: none;
}
0
Sabrina Luo

Вы можете установить tabIndex="-1". Это заставит браузер пропускать эту кнопку, когда вы нажимаете клавишу TAB через фокусируемые элементы управления.

Другие «исправления», предложенные здесь, только удаляют контур фокуса, но все еще оставляют кнопки на вкладке. Однако, с точки зрения удобства использования, вы уже убрали свечение, поэтому ваш пользователь в любом случае не будет знать, какая кнопка в данный момент находится в фокусе.

С другой стороны, создание кнопки без табуляции имеет последствия для доступности.

Я использую его для удаления контура фокуса с кнопки X в bootstrap modal, у которой в любом случае есть дублирующая кнопка «Закрыть» внизу, поэтому мое решение не влияет на доступность.

0
zmechanic

Если вы используете браузер веб-набора (и, возможно, браузер, совместимый с префиксом поставщика веб-набора), этот контур принадлежит псевдоклассу кнопки -webkit-focus-ring. Просто установите для outline значение none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome - это такой веб-браузер, и этот эффект также встречается в Linux (не только в MacOS, хотя некоторые стили Chrome являются macOS только)

0
Nate Symer

Для разработчиков AngularJS я использую из решения:

var element = $window.document.getElementById("export-button");
    if (element){
        element.blur();
    }

Не забудьте ввести $ window.

0
Tomasz Waszczyk

У меня была такая же проблема на MacOS и Chrome, когда я использовал кнопку для запуска события перехода. Если кто-то, читающий это, уже использует прослушиватель событий, вы можете решить его, вызвав .blur() после ваших действий.

Пример:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Хотя, если вы еще не используете прослушиватель событий, добавление одного только для решения этой проблемы может привести к ненужным накладным расходам, и решение для стилевого оформления, как в предыдущих ответах, будет лучше.

0
jospablos

У меня была та же проблема с использованием <a>, действующей как кнопка, и я обнаружил, Мне не хватало Обходной путь, добавив attr type="button", заставляет его вести себя как минимум нормально.

<a type="button" class="btn btn-primary">Release Me!</a>

0
spcsLrg

Добавьте это в CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
0
Gabriel Reis