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

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

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

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

24 ответов


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

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

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

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

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


Если вы предпочитаете использовать 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; 
    }

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

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

Ура!


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

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


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

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

button:focus {outline:0 !important;}

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

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

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


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

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

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

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


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

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

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

input with white dots

после ( белые точки невидимы ) enter image description here

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

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

Удачи В Кодировании!!


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

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

просто добавьте этот css для select box

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

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


код 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;
}

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

browser.display.focus_ring_width = 0

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


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

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


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

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

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

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

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

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

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


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

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

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

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

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


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

 .buttonClassName:focus {
  outline:none;
}

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


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

*: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 должен появиться после файла css Bootstrap в вашем html-коде, чтобы переопределить его.