Tabs Stylization Design

Hey friends,
I’m trying to stylize my tabs in my pricing table on this site (annual & monthly) and having troubles. I want “current” tab to always have white text on green background, whilst the other tab is just black text, no background. Thanks so much for your help in advance!

TJ

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

The text block element is overriding the styles your adding to the current class—so just reset the black font color in the styles panel (either ALT+Click the label, or click the label and choose “Reset”) and let the Tab Link element determine the color:

image

In this case, you’ll notice that the font color is still showing as black, however now that you’ve removed the overridden style it’s getting the color from the Tab Link instead:

image

Now your current pseudo style will make the text white when the Tab Link is active:

image

1 Like

Thank you so much @mikeyevin !!

1 Like

Good grief, I’m having a tough time with this @mikeyevin … here’s a screen recording of what I’m dealing with. I really appreciate your help! https://www.loom.com/share/03f0f125b3fc4437995ae65757c17e42

No worries at all—it actually looks like you ran into a little bug which is making it harder to see why class styles are being overwritten.

I’ve gone ahead and recorded a quick video that goes over the issue and how I’d go about setting this up:

Let me know if you have any questions :metal: