Custom css for active tab

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.

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;	


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?


Check related Toolbar CSS variables, you may need to set:

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

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