Як видалити пунктирний контур Firefox на Кнопках, а також посилання?

Я можу змусити 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. Контур є для того, щоб допомогти тим, хто користується клавіатурою.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-приклади

Якщо ви віддаєте перевагу використовувати 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; 
    }

Нижче працював для мене у випадку ПОСИЛАННЯ, думав поділитися - на випадок, коли хтось зацікавиться.

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

Це просто додає, що трохи додаткової безпеки та запечатує угоду!

Це отримає контроль діапазону:

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

З: Видаліть пунктирні контури з елемента введення діапазону у Firefox

Тестовано на 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;
}

Це добре працює для мене.

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

Якщо вам потрібно вийняти його через проблему з дизайном, додайте :focus стан до кнопки, яка замінює це іншим візуальним сигналом, наприклад, зміною рамки на яскравіший колір чи щось подібне.

Іноді я відчуваю потребу викреслити цей набридливий контур, але завжди готую альтернативний зоровий фокус.

І ніколи не використовуйте функцію blur()js. Використовуйте ::-moz-focus-innerклас псевдо.

У більшості випадків без додавання !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;
}

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

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

Можливо, ви хочете активізувати фокус, а не позбуватися від нього.

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

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

Видаліть пунктирні контури зі посилань, кнопки та елемента введення.

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

Схоже, єдиний спосіб досягти цього - це встановлення

browser.display.focus_ring_width = 0

приблизно в: налаштування на основі кожного браузера.

Це працює на 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;
}

Ви можете спробувати button::-moz-focus-inner {border: 0px solid transparent;}у своєму CSS.