Как удалить пунктирный контур Firefox на кнопках, а также ссылки?
Я могу сделать Firefox не отображать уродливые пунктирные контуры фокуса на ссылки С этого:
a:focus {
outline: none;
}
но как я могу это сделать для <button>
теги, а? Когда я это делаю:
button:focus {
outline: none;
}
кнопки все еще имеют пунктирный Контур Фокуса, когда я нажимаю на них.
(и да, я знаю, что это проблема удобства использования, но я хотел бы предоставить свои собственные подсказки фокуса, которые подходят для дизайна, а не уродливые серые точки)
24 ответов
нет необходимости определять селектор.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
однако это нарушает рекомендации по доступности из W3C. Схема там, чтобы помочь тем, кто навигации с клавиатурами.
Если вы предпочитаете использовать 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;
}
Ура!
[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[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
попробовав много вариантов из вышеперечисленного, для меня сработало только следующее.
*: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-коде, чтобы переопределить его.