Проблема совместимости Firefox для CSS

Question

У меня возникли некоторые проблемы с Firefox v60 с кодом ниже:

.btn:focus, .btn:active {
  background-color: orange !important;
  /*background: red !important;*/
}
.btn-primary{
    border-color: #9b9e9e !important;
    box-shadow: none !important;
    background-color: #9b9e9e !important;
}

https://jsfiddle.net/zsvdph8r/7/

Я хочу изменить цвет кнопки после ее нажатия, но цвет не меняетсясохраняться для этой кнопки.Работает нормально для Chrome и Firefox V52.

Может ли кто-нибудь помочь мне с этим?

Спасибо

Answer 1

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

.btn:active - это правильный код, который добавляет цвет или любой переход при щелчке и исчезает после завершения задачи.

Но если вы сохраните то же самое, измените кнопку на тег <a>и используйте

.btn:active {
  color: orange;
}

Это решит вашу проблему, но вам может понадобиться добавить больше стилей, чтобы сделать ссылку похожей на кнопку, если вы хотите.