How to remove the black box displayed when the tab header is selected?

[wartim]

I want to achieve the effect shown in the document:
https://blazorise.com/examples/tabs/basic/#pills-home

View through F12,I found that I need to put the tab in the card/card head tags
But when the label is clicked by default, a rectangular black border is displayed. I want to remove it, but I can’t find any effective CSS style.

[stsrki]

I'm not sure what black box. I cannot see it. Here is the SS of the last version

What version do you use? And what browser?

[wartim]

@stsrki
chrome 88.0.4324.150

Is it related to the version of bootstrap and popper I quoted? I don’t want to use CDN. I went to the official website to download. I couldn’t find the download of bootstrap-4.5.0 and [email protected]. So I downloaded the revised version: bootstrap- 4.5.3 and popper. [email protected]

[stsrki]

The version you use should be fine I guess.

What do you have in site.css? In default Blazor template it can mess with Bootstrap styles. You can also inspect in devtools to see what exactly is adding the borders.

[wartim]

The "master" version downloaded a week ago should be 0.9.3.6, at least written

[wartim]

And after clicking the tab, a black focus box appears, the css just automatically add class: "active", and then if I click on the blank space of the page again, the black box disappears, and there is no change in the CSS style

[stsrki]

I tried the same code as you have and I just cant reproduce the issue on my side.

[wartim]

And ctrl + f5 does not work, I removed the redundant code of the project and made a demo

demo.zip

[stsrki]

Still no black box for me

[wartim]

Is it another browser version problem?
Google Chrome 88.0.4324.150

[wartim]

222.mp4

[wartim]

@stsrki
I tested it out, and on my computer, I have to add a css style so that there is no black box

[stsrki]

It might be browser version problem. Mine is 90.x