Search code examples
htmlcssmaterialize

How do remove the pre-selected Tab indicator from Materializecss?

I am using the tab in Materilizecss to design the Navigation tabs in my web app.

By default, the first tab is selected. This is indicated by an underlining line under the first tab, as seen in the picture below. enter image description here

By default, I do NOT want ANY of the tab to be preselected! To be clear, I do not want any of the tabs to have any underlining by default as seen in the image below. enter image description here

I want the tabs to be unselected by default until a user chooses one of the tabs, only then will that tab get an underlining line under it.

Unfortunately, I can't seem to find any documentation about removing the default selected tabs/underlining.

Looking forward to your help.

Solution

  • For remove your border bottom : 

    .target {
    border-bottom:none;
}

    And to bring up with hover :

    .target:hover {
    border-bottom: 1px solid red;
}