Как удалить точечный контур Firefox на КНОПКАХ, а также на ссылках?

Невозможно удалить этот пунктирный фокус в Firefox с помощью CSS.

Если у вас есть доступ к компьютерам, на которых работает ваше веб-приложение, перейдите к about: config в Firefox и установите browser.display.focus_ring_width на 0. Тогда Firefox вообще не будет показывать пунктирные границы.

Следующая ошибка объясняет тему: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

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

browser.display.focus_ring_width = 0

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

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

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

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

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

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

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

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

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

Если вы предпочитаете использовать CSS, чтобы избавиться от пунктирного контура:

/*for FireFox*/
    input[type = "submit"]::-moz-focus-inner, input[type = "button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type = "submit"]:focus, input[type = "button"]:focus
    {     
        outline : none; 
    }

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

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

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

:focus, :active {
    outline: 0;
    border: 0;
}

Нет необходимости определять селектор.

:focus {outline:none;}
::-moz-focus-inner {border:0;}

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

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

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

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

Приведенное ниже сработало для меня в случае ССЫЛКИ, подумал о том, чтобы поделиться - если кому-то интересно.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

Ваше здоровье!

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

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

Это просто добавляет немного дополнительной безопасности и скрепляет сделку!

[Обновление] Это решение больше не работает. Решение, которое сработало для меня, - это https://stackoverflow.com/a/3844452/925560

Ответ, помеченный как правильный, не работал с Firefox 24.0.

Чтобы удалить точечный контур на кнопках и тегах привязки Firefox, я добавил следующий код:

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;
}

Я нашел решение здесь: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

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

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;
}

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

 .buttonClassName:focus {
  outline:none;
}

Пробовал здесь большинство ответов, но ни один из них не помог мне. Когда я понял, что мне нужно избавиться от синего контура на кнопках и в Chrome, я нашел другое решение. Удалить синюю рамку с кнопки пользовательского стиля css в Chrome

Этот код работал у меня в Firefox версии 30 в Windows 7. Возможно, он поможет кому-нибудь еще :)

button:focus {outline:0 !important;}

В большинстве случаев без добавления !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;
}

Протестировано в Firefox 46 и Chrome 49 с использованием этого кода.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Перед (видны белые точки)

После (белые точки не видны)

Если вы хотите применить только к нескольким полям ввода, кнопкам и т. д., Используйте более конкретный код.

input[type=text] {
  outline: none !important;
}

Удачного кодирования !!

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

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

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

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-коде, чтобы переопределить его.

Приведенный ниже код 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;
}

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

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

У меня это нормально работает.

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

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

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

Да, не пропустите !важный

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