How to override the default focus css style of react-tab?

Question

I am using react-tab to create an interface like this

However if i click on the tab, it will turn into this:

It is the default css style when the tab gets focus.

I have tried this css (in less) but it is unable to override the default style:

.react-tabs [role=tab],
.react-tabs [role=tablist],
.react-tabs [role=tab]:focus,
.react-tabs [role=tablist]:focus, {
  border-top: none ;
  border-left: none ;
  border-right: none;
  border-bottom: 2px solid #ddd;
}

How can I override the css styles?

In addition, is there anywhere to make the above css more concise? For one I would like to be able to combine [role=tab] and [role=tablist] into a single selector.

EDIT

The html markup of the tab

Marvin · Answer 1 · 2017-03-22T07:15:00.150

1

You have a syntax error in your CSS: the last comma in .react-tabs [role=tablist]:focus, /* <-- */ must be removed.

Demo

.react-tabs {
  height: 20px;
}

.react-tabs [role=tab]  { background: orange; } /* correct version */
.react-tabs [role=tab], { background: blue; } /* won't work */

<div class="react-tabs">
  <div class="something" role="tab">Want to change this guy</div>
</div>

edited Mar 22 '17 at 07:15

answered Mar 21 '17 at 19:43

Marvin

9,164
3
26
44

The structure is actually more like `
Want to change this guy
`. I tried your solution but it does not work. – Anthony Kong Mar 22 '17 at 01:00
Ok this changes everything. Then just remove the last comma and see if the styles get applied (inspect element). – Marvin Mar 22 '17 at 07:17

score 1 · Answer 2 · edited May 10 '17 at 05:01

You must override all default properties of :focus and :focus:after.

This code below works for me:

  .react-tabs [role=tab]:focus {
    box-shadow: none;
    border-color: none;
    border-bottom-color: $yourColor;
    outline: none;
  }

  .react-tabs [role=tab]:focus:after{
    content: "";
    position: absolute;
    height: 5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    background: transparent; 
  }

nashcheez · Answer 3 · 2017-03-21T09:12:06.343

0

Provide outline: 0 to your code.

outline by default appears over many form elements like input & button, when they are active or focussed. So you have to manually make it disappear.

Outlines differ from borders in the following ways:

Outlines do not take up space, they are drawn above the content.

Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around
the construct.

Refer code:

.react-tabs [role=tab],
.react-tabs [role=tablist],
.react-tabs [role=tab]:focus,
.react-tabs [role=tablist]:focus, {
  border-top: none ;
  border-left: none ;
  border-right: none;
  border-bottom: 2px solid #ddd;
  outline: 0 !important;
}

edited Mar 21 '17 at 09:12

answered Mar 21 '17 at 08:09

nashcheez

5,067
1
27
53

Are you sure? Can you provide your code or make a fiddle then maybe? – nashcheez Mar 21 '17 at 08:11
Maybe try `outline: 0 !important;` – nashcheez Mar 21 '17 at 09:12
nay, it does not work. It is rather difficult to construct a standalone example (e.g. codepen does not support `import ... from ...` es6 syntax). I will give it a go. – Anthony Kong Mar 22 '17 at 00:58

How to override the default focus css style of react-tab?

3 Answers3

Demo