DEV Community

loading...

React Bootstrap on mobile: confusing focus styling

Sylwia Vargas
I teach React, Redux, JavaScript, Ruby, Rails at Flatiron School | I care about web accessible and inclusive tech | she/her
・1 min read

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:

When I apply:

.btn:active {
  background: #fff !important;
  color: #343a40 !important;
}
Enter fullscreen mode Exit fullscreen mode

The button unclicks for a second and then goes back to the "selected" styling:
Screen recording

And when I apply:

.btn.focus,
.btn-dark.focus,
.btn:focus,
.btn-dark:focus {
    box-shadow: none !important;
    outline: none !important;
}
Enter fullscreen mode Exit fullscreen mode

There's basically no difference


I have tried every solution in this stack overflow thread: bootstrap button shows blue outline when clicked.
I also created a stackOverflow question on that but to no avail.

Discussion (0)