1

I'm using the react-tabs library and I have applied custom styling, but I'm facing an issue where a white line appears under the selected tab title when it is clicked. The strange thing is that the line disappears when I click somewhere else on the page.

Codesandbox Link

White line appears under Tab 3 which is currently active

Below is the CSS code for the tabs:

.react-tabs__tab {
   background-color: inherit;
   border: 1px solid #ccc;
   border-radius: 50px;
   cursor: pointer;
   padding: 10px;
}

.react-tabs__tab:hover {
   color: #0099ff;
   transition: 0.3s;
}

.react-tabs__tab--selected {
   color: #0099ff;
   border: 1px solid #0099ff;
   border-bottom: none; /* Updated line */
}

.react-tabs__tab:focus {
   outline: none;
}

.react-tabs__tab:focus:after {
   content: none;
}
Rayaan R
  • 33
  • 5
  • 2
    If you remove the `border-bottom: none` line, the white line disappears: https://nimb.ws/ltJdCw – m4n0 Jun 16 '23 at 18:36
  • 1
    It's not a white line, it's the absence of a border at the bottom as @m4n0 has mentioned. It appears to have been deliberately set to none - do you know why? – A Haworth Jun 16 '23 at 19:06
  • 1
    @m4n0 got it. I firsly tried by removing bottom, and then added this focus and focus:after part. However, I forgot to double-check if the bottom part was removed after that. Thank you for pointing that out, and I appreciate your help. – Rayaan R Jun 16 '23 at 20:23

0 Answers0