Tabs Component Selected Background Color

Radzen.Blazor Components
1

Hello,

I've been trying to attempt to have my currently selected tab to have a unique background (I want all other tabs white, and the selected tab a green background with black text).

So far, I've only been able to change the color of the border and text as per user selection of tab. How can I also have the background color changed with user selection on the tab?

So far, I've been attempting this with enclosed styling and CSS.

<RadzenTabsItem Text="Project" @bind-SelectedIndex=@selectedIndex
style=@($"border: 2px solid #79b8ae; --rz-tabs-tab-color: {(condition ? "#000000" : "inherit")}; --rz-tabs-tab-selected-color: {(condition ? "#79b8ae" : "inherit")}")>

.rz-tabview-nav-link .rz-tabview-nav-item .rz-tabview-nav-link .rz-tabs-tab-selected-color {
    font-weight: bold;
    font-size: 18px;
    background-color: #79b8ae;
}

.rz-tabview-nav-link.rz-state-active {
    font-weight: bold;
    font-size: 18px;
    background-color: #79b8ae;
}

If you have any ideas on how to resolve this I would appreciate the advice.

Thank you

Simon

2

Hi @dahjakl,

Try something like this:

<RadzenTabs  style="--rz-tabs-tab-selected-background-color: green;--rz-tabs-tab-selected-color: black" >
3

Hi Korchev,

Unfortunately this did not work for me. By doing some more digging, I was able to force the CSS to apply to the Radzen Tabs

:root {
--rz-tabs-tab-selected-color: #000000 !important;
}

.rz-tabview-nav .rz-tabview-selected {
border-top-color: #79b8ae;
background-color: #79b8ae;
color: #000000;
border: 2px solid #79b8ae;
font-weight: bold;
}

Thank you for the advice.

Simon.