Firefox compatiblity issue for CSS

Question

I am having some trouble with firefox v60 with the below code:

.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/

I want to change the color of button once its clicked but the color doesn't persist for that button. Its working fine for chrome and firefox v52.

Can someone help me with it?

Thanks

Answer 1

The way I see is that :focus is an issue, when we click on button focus remains there on chrome over the button but not in firefox. That's how these browsers work differently here.

.btn:active is the right code here which will add color or any transition on click and disappears after completing the task.

But if you persist on same then change button to <a> tag and use

.btn:active {
  color: orange;
}

This will solve your problem, but you might need to add more styling to make link look like button if you wish to.