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

Question

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

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

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

Answer 1

Да, не пропустите ! Важно

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

Answer 2

Вместе с Bootstrap 3 я использовал этот код. Второй набор правил просто отменить , что делает начальная загрузка для кнопок фокуса / активной:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

ОБРАТИТЕ ВНИМАНИЕ, что ваш собственный файл CSS должен идти после файла Bootstrap CSS в вашем HTML-коде, чтобы переопределить его.

Answer 3

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

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Answer 4

Это работает на firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 5

Вы можете попробовать button::-moz-focus-inner {border: 0px solid transparent;} в своем CSS.