Changing Active Tab Highlight

I cannot seem to find the selector responsible for the blue line highlight on the active tab. I am using Framework7 core. Been scratching my head for days.

Have you tried inspecting it with google chrome tools? There you should be able to see css classes responsible for this.

Yes, that is how I spent the wasted hours. The only one that works is if I disable --f7-default-theme which is going to affect everything else.

https://framework7.io/docs/toolbar-tabbar.html#css-variables

You need to change --f7-tabbar-link-active-border-color variable. E.g.:

--f7-tabbar-link-active-border-color: red;
1 Like

Thank you so much that works like a charm! :grinning::grinning::grinning: