Как удалить пунктирный контур Firefox на кнопках, а также ссылки?

Question

Я могу заставить Firefox не отображать некрасивые пунктирные контуры фокуса на ссылках с помощью этого:

a:focus { 
    outline: none; 
}

Но как я могу сделать это и для <button> тегов? Когда я делаю это:

button:focus { 
    outline: none; 
}

кнопки все еще имеют пунктирный контур фокуса, когда я нажимаю на них.

(и да, я знаю, что это проблема юзабилити, но я хотел бы предоставить свои собственные подсказки фокуса, которые соответствуют дизайну вместо уродливых серых точек)

Answer 1

Просто добавьте этот CSS для поля выбора

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Это нормально работает для меня.

Answer 2

В большинстве случаев без добавления !important в код CSS это не сработает.

Итак, не забудьте добавить !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

Или любой другой код:

button::-moz-focus-inner {
  border: 0 !important;
}

Answer 3

Получит контроль диапазона:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

From: Удалить пунктирный контур из элемента ввода диапазона в Firefox

Answer 4

Код CSS ниже работает, чтобы удалить это:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 5

Возможно, вы захотите усилить фокус, а не избавиться от него.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Answer 6

Удалить пунктирный контур из ссылок, кнопки и элемента ввода.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 7

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

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

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

И никогда использовать функцию blur() js. Используйте псевдокласс ::-moz-focus-inner.

Answer 8

Похоже, что единственный способ добиться этого - установить

browser.display.focus_ring_width = 0

в about: config для каждого браузера.

Answer 9

button::-moz-focus-inner { border: 0; }

Где button может быть любым селектором CSS, для которого вы хотите отключить поведение.

Answer 10

Если у вас есть рамка на кнопке и вы хотите скрыть пунктирный контур в Firefox без удаления границы (и, следовательно, это дополнительная ширина на кнопке), вы можете использовать:

.button::-moz-focus-inner {
    border-color: transparent;
}