title: How to override the default focus css style of react-tab?
body: <p>I am using react-tab to create an interface  like this </p>
  
  <p><a href="https://i.stack.imgur.com/vt3g3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vt3g3.png" alt="enter image description here"></a></p>
  
  <p>However if i click on the tab, it will turn into this:</p>
  
  <p><a href="https://i.stack.imgur.com/PM8QC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PM8QC.png" alt="enter image description here"></a></p>
  
  <p>It is the default css style when the tab gets focus.</p>
  
  <p>I have tried this css (in less) but it is unable to override the default style:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>How can I override the css styles?</p>
  
  <p>In addition, is there anywhere to make the above css more concise? For one I would like to be able to combine <code>[role=tab]</code> and <code>[role=tablist]</code> into a single selector.</p>
  
  <p><em>EDIT</em></p>
  
  <p>The html markup of the tab</p>
  
  <p><a href="https://i.stack.imgur.com/ZIszE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZIszE.png" alt="enter image description here"></a></p>