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

Question

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

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

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

Answer 1

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

Answer 2

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

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

Тем не менее, это нарушает рекомендации по доступности из W3C. Схема поможет тем, кто пользуется клавиатурой.

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

Answer 3

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

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

Answer 4

Ниже работал для ССЫЛКИ, думал о разделе - на случай, если кто-то заинтересован.

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

Ура! * * 1004

Answer 5

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

Answer 6

[Обновить] Это решение больше не работает. Решение, которое сработало для меня, это 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

Answer 7

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

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

button:focus {outline:0 !important;}

Answer 8

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

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

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

Answer 9

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

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

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

Answer 10

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

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

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

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

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

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

Счастливое кодирование !!