Как удалить пунктирный контур Firefox на КНОПКАХ, а также на ссылках?
https://stackoverflow.com/questions/71074
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я могу заставить Firefox не отображать уродливые пунктирные контуры фокуса на ссылки с этим:
a:focus {
outline: none;
}
Но как я могу сделать это для <button> теги тоже?Когда я это делаю:
button:focus {
outline: none;
}
кнопки по-прежнему имеют пунктирный контур фокуса, когда я нажимаю на них.
(и да, я знаю, что это проблема с удобством использования, но я хотел бы предоставить свои собственные подсказки по фокусу, соответствующие дизайну, а не уродливые серые точки)
Решение
button::-moz-focus-inner {
border: 0;
}
Другие советы
Нет необходимости определять селектор.
: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;
}
Ваше здоровье!
:focus, :active {
outline: 0;
border: 0;
}
[Обновление] Это решение больше не работает.Решение, которое сработало для меня, это одно 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
Для этого в Интернете найдено множество решений, многие из которых работают, но чтобы заставить это сделать, чтобы абсолютно ничего не могло выделиться/сфокусироваться, используйте следующее:
::-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;
}
Приятного кодирования!!
В большинстве случаев без добавления !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;
}
Просто добавьте этот CSS для поля выбора
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
У меня это работает нормально.
Похоже, единственный способ добиться этого — установить
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 псевдокласс.
Удалите пунктирный контур со ссылок, кнопок и элементов ввода.
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 без удалив границу (и, следовательно, дополнительную ширину кнопки), вы можете использовать:
.button::-moz-focus-inner {
border-color: transparent;
}
Код 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;
}
Это позволит получить контроль диапазона:
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
От: Удалить пунктирный контур из элемента ввода диапазона в Firefox
Можешь попробовать button::-moz-focus-inner {border: 0px solid transparent;} в вашем CSS.
Это работает на Firefox v-27.0
.buttonClassName:focus {
outline:none;
}
Перепробовав множество вариантов из вышеперечисленных, мне помогло только следующее.
*:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;}
Вместе с 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 должен идти после файла CSS Bootstrap в вашем html-коде, чтобы переопределить его.
Да, не пропусти !важный
button::-moz-focus-inner {
border: 0 !important;
}
