0

THE PROBLEM:

In my project, when I select and then unselect a button on mobile, it still remains dark because it's in focus and that's confusing: Screen recording

Here's the deployed page: https://covid-19-mortality.netlify.com/

WHAT I WANT TO ACHIEVE:

I would like to override the button focused styling so that it is intuitive that the button is in focus and not selected.

WHAT I HAVE TRIED:

I have tried every solution in bootstrap button shows blue outline when clicked.

Sylwia Vargas
  • 1
  • 3

1 Answers1

0

Try this

.btn:active {
   background: #fff !important;
   color: #343a40 !important;
 }
Hassaan Tauqir
  • 2,464
  • 1
  • 13
  • 11
  • Sadly, it still remains focused in the same way https://im4.ezgif.com/tmp/ezgif-4-1bef6213c66e.gif – Sylwia Vargas Apr 05 '20 at 20:27
  • Oh sorry about that, I misunderstood your question, apparently on mobile view your button stays active, and you have applied some classes to active state. I have updated my answer. – Hassaan Tauqir Apr 05 '20 at 20:54
  • Thank you! It's better but it still goes back to "selected" styling after a split second: https://im4.ezgif.com/tmp/ezgif-4-c1cd47972bdc.gif – Sylwia Vargas Apr 05 '20 at 21:16