Custom css for active tab

Questions
1

Hi everyone,

I am trying to change the styling of the active tab to look more like the picture below (solid background colour and text color change) rather than the default thin line.

N42y6.jpg800×200 19.3 KB

I have solved this by adding a custom class to the active tab:

.custom-class .tab-link-active {
  background: var(--f7-theme-color);
  color: white !important;	
}

image

So far this is working fine, but I have two questions:

  1. Is there a better way to do this?
  2. If not, how can I remove the default thin line on the active tab as it becomes visible during the animation when the active tab is changed?

Thanks

2

Check related Toolbar CSS variables https://framework7.io/docs/toolbar-tabbar.html#css-variables, you may need to set:

:root {
  --f7-tabbar-link-active-border-color: transparent;
}
1 Like
3

Who can i disable the dialog alert show effect (animation)?
@nolimits4web