Удалить двойной контур на кнопке и текст внутри

Question

У меня есть button с текстом внутри него.Я ввел outline в состояния :active и focus, как показано ниже.У меня странное поведение на firefox: когда я нажимаю на button, вокруг button появляется outline, а внутри кнопки - вторая (см. Скриншот ниже).Я только что получил эту странную проблему на firefox.Как я могу это исправить.Единственный ответ на мой вопрос, который я нашел, был использовать outline: none;, но это не то, что я хочу.Я хочу наброски вокруг button.

outline на chrome Windows 10:

outline в firefox (выпуск) Windows 10:

.button__btn {
  background-color: transparent;
  border: 2px solid blue;
  font-size: 20px;
  padding: 8px 24px;
  text-align: center;
}

.button__btn:active,
.button__btn:focus {
  outline: 1px dotted black;
  outline-offset: 5px;
}

<div class="button">
  <button class="button__btn">I'm a default button</button>
</div>

Вот еще и кодовая ручка: https://codepen.io/STWebtastic/pen/EORBpE

Answer 1

Пожалуйста, используйте следующий код:

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

Это удалит внутренний контур Firefox для всех кнопок.

Это предложение также упоминалось здесь: Как удалить пунктирный контур Firefox наКНОПКИ, а также ссылки?

Answer 2

Попробуйте это:

CSS

.button{
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer - Edge */
          user-select: none; /* Chrome and Opera */
}

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