Как убрать пунктирную белую рамку вокруг сфокусированного текста кнопки

Question

Мне нужно, но не могу удалить белую пунктирную рамку вокруг текста фокусируемой кнопки.

После прочтения статьи об "удалить белую рамку (особенно Пунктирная рамка вокруг ссылки? и ссылки внутри), я пробовал несколько решений по отключению контура, например "outline: 0; или outline: none;, с использованием или без !important.

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

button {
  font-size: 87.5%;
  font-family: "ubuntu", Sans-serif;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  cursor: pointer;
  background-color: royalblue;
  color: white;
  border: 0;
}

button:focus,
button:active {
  outline: none;
  outline: 0;
  outline: none !important;
  outline: 0 !important;
}

<button type="button">TEST</button>

Используя Firefox 67.0.3 в Ubuntu 18.04 (Bionic Beaver), эта страница по-прежнему показывает пунктирную белую рамку вокруг сфокусированного текста кнопки, которую я хотел быудалить (я покажу фокус с моим собственным методом).

Answer 1

Эти стили объявлены на уровне UA, поэтому каждый браузер имеет свою собственную реализацию (а в случае Firefox - псевдоэлементы для их нацеливания).

В Firefox вы можете использовать псевдоэлемент ::-moz-focus-inner:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none;
}  

Answer 2

Необходимо добавить задержку для разных браузеров, например:

button:focus,
button:active {
    -moz-outline: 0;
    -ms-outline:0;
    -o-outline: 0;
    -webkit-outline: 0;
} 

Это свойства с префиксом поставщика, предлагаемые соответствующими механизмами рендеринга (-webkit для Chrome, Safari; -moz для Firefox,-o для Opera, -ms для Internet Explorer).Обычно они используются для реализации новых или фирменных функций CSS до окончательного разъяснения / определения W3.

Answer 3

Просто установите границу: 0, я обновил ваш код, попробуйте это будет работать!

 <input type="button" value="text">

А в теге style просто используйте это: -

 input[type="button"]::-moz-focus-inner {
            border: 0
        }