Я могу заставить 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 : 0;
}
/*for IE8 and below */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
}
Ниже я работал у меня в случае LINKS, думал о совместном использовании - в случае, если кто-то заинтересован.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Ура!
:focus, :active {
outline: 0;
border: 0;
}
[Обновить] Это решение больше не работает. Решение, которое сработало для меня, это fooobar.com/questions/16609/...
Ответ, помеченный как правильный, не работает с 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 custom-style в 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;
}
Счастливое кодирование!!
Просто добавьте этот css для выбора окна
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Это отлично работает для меня.
В большинстве случаев без добавления в код CSS !important он не будет работать.
!importanta, a:active, a:focus{
outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}
Или любой другой код:
button::-moz-focus-inner {
border: 0 !important;
}
Похоже, что единственный способ добиться этого - установить
browser.display.focus_ring_width = 0
примерно: config для каждого браузера.
Возможно, вы захотите усилить фокус, а не избавиться от него.
button::-moz-focus-inner {border: 2px solid transparent;}
button:focus::-moz-focus-inner {border-color: blue}
Я думаю, вам действительно нужно знать, что вы делаете, удалив план фокуса, потому что он может испортить его для навигации по клавиатуре и доступности.
Если вам нужно вытащить его из-за проблемы с дизайном, добавьте к кнопке :focus состояние, которое заменит это на другую визуальную метку, например, изменив границу на более яркий цвет или что-то в этом роде.
Иногда я чувствую необходимость принять этот раздражающий контур, но я всегда готовлю альтернативный фокус визуальной подсказки.
И никогда используйте функцию blur() js. Используйте псевдо-класс ::-moz-focus-inner.
button::-moz-focus-inner { border: 0; }
Где button может быть любым селектором CSS, для которого вы хотите отключить поведение.
Если у вас есть рамка на кнопке и вы хотите скрыть пунктирную схему в Firefox без удаления границы (и, следовательно, дополнительной ширины на кнопке), вы можете использовать:
.button::-moz-focus-inner {
border-color: transparent;
}
Удалите пунктирную линию из ссылок, кнопки и элемента ввода.
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 ниже:
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 должен появиться после файла cssssstrapstash в вашем html-коде, чтобы переопределить его.
Да, не пропустите ! Важно
button::-moz-focus-inner {
border: 0 !important;
}