3

I have a set of tabs on my page that when clicked, switch the active tab to the value of the clicked tab. This works swimmingly, but I am left with a sour taste in my mouth when I look at the new active tab having a big blue focus box around it. Is there a React-y way to prevent this?

Would an onMouseDown={this.someMethod} with a preventDefault() stuck in the method work?

Fred Chapman
  • 133
  • 1
  • 10

1 Answers1

1

The logics are right but the design is making you problems? In that case some CSS should make it right.

If you have a navbar the CSS should be something like this:

 .navbar-inverse .navbar-brand:focus {
  background-color : red; //Just add the properties you want here
}

If you just right click and inspect the element the browser should tell you exactly about what CSS handles the focus on the tab.

Theo
  • 1,165
  • 9
  • 14
  • I wanted to be able to not allow the blue focus bordering (on Chrome) when you clicked on a nav item. Because of the spacing, the nav items sit right next to each other and the focus "border" bleeds onto the other nav items – Fred Chapman Mar 24 '16 at 15:12
  • In that case just add the css which handles the focus. – Theo Mar 24 '16 at 15:14
  • @FredChapman: then set `outline: none`. – Felix Kling Mar 24 '16 at 15:15