DEV Community

Sylwia Vargas
Sylwia Vargas

Posted on

4 2

React Bootstrap on mobile: confusing focus styling

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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit