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


507

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

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

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


2
Похоже, что в Firefox 4 элементы больше не получают контур по умолчанию при нажатии, а только при получении фокусировки на клавиатуре.
Герт

1
То, что вы называете «некрасивым», предназначено для поддержки доступности веб-сайта. Только пользователи клавиатуры больше не могут определять, какая часть веб-сайта находится в фокусе при удалении этого контура. Ваш сайт будет полностью недоступен, и это никогда не должно иметь место. Никогда не удаляйте контур. Лучше сделай это по-своему.
Маркус Граф

Ответы:


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

15
Да, это работает и для меня! Теперь, как это можно сделать для избранных?
7

16
Обратите внимание, что это также работает для ввода (например, input :: - moz-focus-inner {border: 0;})
El Yobo

15
Назначение двойной двоеточия: (CSS3 нотация) evotech.net/blog/2007/05/…
sholsinger

21
Это не сработало для меня, потому что bootstrap.css создавал уродливые пунктирные кнопки. Вместо этого я поставил:focus {outline:none !important;}
machineaddict

5
: focus {outline: none;} :: - moz-focus-inner {border: 0;} будет менее конкретным
Бен

311

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

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

Однако это нарушает лучшие практики доступности от W3C. План предназначен для тех, кто ориентируется на клавиатуре.

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


8
Спасибо, это сработало для меня, когда правильный ответ не получился. Должно быть, я использовал неправильный селектор.
irl_irl

Спасибо за это, это удалит это также по ссылкам и кнопкам?
Натан

3
Этот самый лучший! Принятый ответ только для <button>, а <a>не для<input>
Рон ван дер Хейден

2
Идеально в Mozilla Firefox 30 под Ubuntu (GNU / Linux).
e-info128

4
Я оставлю записку об этом нарушении доступности. Важно помнить, что не каждый может использовать мышь, или видеть, или видеть хорошо. Тем не менее, по ссылке (и здравому смыслу) сокрытие контура только нарушает a11y, когда это сделано without ... an author-supplied visual focus indicator- другими словами, хорошо, если пользовательский агент заменяет стиль своим, как упоминалось в OP. В идеале он должен быть высококонтрастным.
Джонсип

48

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

Вам не нужен блок на числах, которые равны нулю. 0pxможно заменить на просто0
сленг

44

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

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

Ура!


12
Просто a { outline: none; }должно быть достаточно для ссылок.
грант

3
Здесь! Важно, что другие решения не имели этого и не работали. для меня.
Криштиану Фонтес

Но часто вы должны использовать a { outline: none; }с !important->a { outline: none !important; }
Joryl

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

Работал как брелок для выбранной опции, которую я использовал
Мухаммед Ахсан

1
Это не было достаточно конкретно, и я не хотел использовать! Важные или предназначенные только для aэлементов, поэтому я нашел хороший вариант body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
Иван Дерст

10

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


2
Это больше не работает: / Решение, которое сработало, это один stackoverflow.com/a/3844452/925560
Ренато Карвалью

8

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

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

button:focus {outline:0 !important;}

То же самое здесь, это единственное решение, работающее на FF 38.0.5
OlivierH

6

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

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

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


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

Это ответ теперь полностью ложный. Установка, ::-moz-focus-inner {border:0;}как указано в нескольких других ответах, работает отлично.
Энди Мерсер

@AndyM Этот ответ работает. Решение представлено в других ответах для CSS и работает только для отдельных сайтов.
Рахиль Вазир

7
Вопрос спрашивает, как это можно сделать с помощью CSS, а ответ говорит, что этого не может быть. Это неверно. Может быть.
Энди Мерсер

6

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

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

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


6

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

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

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


Никаких других решений не работает range- спасибо :)
Камиль Келчевски

Отлично, работает в Firefox 72 на Linux тоже!
asdjfiasd

5

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

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

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

ввод с белыми точками

После (белые точки не видны) введите описание изображения здесь

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

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

Удачного кодирования!


!importantБыло необходимо для меня , чтобы переопределить таблицу стилей Firefox,. Ура!
SamHH

5

Просто добавьте этот CSS для выбора

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

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


4

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

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

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

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


4

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

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

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


3

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

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

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

2
@ Натан немного опоздал, но отсутствие какого-либо стиля в состоянии фокуса испортит опыт работы с клавиатурой. Вы не сможете узнать, на чем фокусируется, когда нажимаете клавишу Tab .
хкан

@Хкан Да, я согласен. Но контур Firefox выглядит ужасно, особенно когда он находится вокруг пользовательской границы фокуса.
Натан

@ Натан, я полностью согласен с этим. То, что мы должны сделать, это предоставить наш собственный стиль для состояния фокуса, а не делать элементы одинаковыми в указанном состоянии.
Hkan

3

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

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

3

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

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

3

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

2

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

browser.display.focus_ring_width = 0

примерно: конфигурация для каждого браузера.



1

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

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

На самом деле (по крайней мере в Firefox 77) вам нужно только: button:focus { outline: none !important } или, если я вам нравлюсь, не нравится! Важно, это работает и для отмены стилей Firefox: :root button:focus { outline: none }
Jonas Sandstedt

1

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


1

Да, не пропустите ! Важно

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.