RadzenTabsItem: --rz-tabs-tab-color stopped to work and the cursor is not 'pointer' anymore. #1076

New Issue

claunia · 2026-01-29T17:48:36Z

claunia commented

2026-01-29 17:48:36 +00:00

Originally created by @OndrejUzovic on GitHub (Dec 29, 2023).

The css variable '--rz-tabs-tab-color' stopped to work and the cursor is not 'pointer' anymore for the RadzenTabsItem component.

The problem is the fix of 'redundant link WCAG warning' (commit a2144d21, file RadzenTabsItem.razor) removed the 'ref' attribute from the <a role="tab" ..> element which caused the selector
a:-webkit-any-link stopped to be applied
and the selector a:not([href]):not([class]) started to be applied.

As a consequence, the variable '--rz-tabs-tab-color' is suppressed and the cursor is not the pointer anymore.

This is how styles were applied before the fix:

Please, would it be possible to provide a different fix for that warning so that the original behavior is preserved?

Originally created by @OndrejUzovic on GitHub (Dec 29, 2023). The css variable '**--rz-tabs-tab-color**' stopped to work and the cursor is not 'pointer' anymore for the **RadzenTabsItem** component. The problem is the fix of 'redundant link WCAG warning' (commit a2144d21, file RadzenTabsItem.razor) removed the 'ref' attribute from the `<a role="tab" ..>` element which caused the selector `a:-webkit-any-link` stopped to be applied and the selector `a:not([href]):not([class])` started to be applied. As a consequence, the variable '**--rz-tabs-tab-color**' is suppressed and the cursor is not the pointer anymore. ![image](https://github.com/radzenhq/radzen-blazor/assets/55758368/7e464ab0-c475-4796-89d3-07e6cf45852c) This is how styles were applied before the fix: ![image](https://github.com/radzenhq/radzen-blazor/assets/55758368/2bbf28ba-fb40-4924-bccc-005e9f2b1330) Please, would it be possible to provide a different fix for that warning so that the original behavior is preserved?

claunia closed this issue

2026-01-29 17:48:37 +00:00

claunia commented

2026-01-29 17:48:37 +00:00

@timheuer commented on GitHub (Mar 22, 2024):

@yordanov this change fixing this issue broke the experience on my usage. The text which had been white, is now forced black:

@timheuer commented on GitHub (Mar 22, 2024): @yordanov this change fixing this issue broke the experience on my usage. The text which had been white, is now forced black: ![image](https://github.com/radzenhq/radzen-blazor/assets/4821/c0300e20-c8f0-4166-aba0-413fa9d28db1)

claunia commented

2026-01-29 17:48:37 +00:00

@yordanov commented on GitHub (Mar 25, 2024):

Hi @timheuer,

Could you please share the styles used to apply this custom background color?

There is a dedicated CSS variable for the selected tab text color that you can use:

:root { /* Applied to all tabs on page */
    --rz-tabs-tab-selected-color: #ffffff;
}

.my-tabs { /* Applied to <RadzenTabs class="my-tabs" ... > */
    --rz-tabs-tab-selected-color: #ffffff;
}

@yordanov commented on GitHub (Mar 25, 2024): Hi @timheuer, Could you please share the styles used to apply this custom background color? There is a dedicated CSS variable for the selected tab text color that you can use: ```css :root { /* Applied to all tabs on page */ --rz-tabs-tab-selected-color: #ffffff; } .my-tabs { /* Applied to <RadzenTabs class="my-tabs" ... > */ --rz-tabs-tab-selected-color: #ffffff; } ```

claunia commented

2026-01-29 17:48:38 +00:00

@timheuer commented on GitHub (Mar 25, 2024):

@yordanov this was the style I was using that was working:

.rz-tabview-nav .rz-tabview-selected {
    border-top-color: #512bd4;
    background-color: #512bd4;
    color: #ffffff;
}

After some version update it stopped applying the forecolor

@timheuer commented on GitHub (Mar 25, 2024): @yordanov this was the style I was using that was working: ```css .rz-tabview-nav .rz-tabview-selected { border-top-color: #512bd4; background-color: #512bd4; color: #ffffff; } ``` After some version update it stopped applying the forecolor

claunia commented

2026-01-29 17:48:38 +00:00

@yordanov commented on GitHub (Mar 26, 2024):

@timheuer you are right that text and background color should be applied to the same element. That's just been fixed with 510d94b. However, your styles could be optimized to take advantage of the available CSS variables.

That said, with the current Radzen.Blazor version you can use the following to fix your styles:

.rz-tabview-nav .rz-tabview-selected {
    background-color: #512bd4;
    --rz-tabs-tab-selected-color: #ffffff;
    --rz-tabs-tab-selected-top-border-color: #512bd4;
}

With the next version (containing 510d94b) your styles should work as they are, but you will also be able to further optimize:

:root { /* Applied to all tabs on page */
    --rz-tabs-tab-selected-background-color: #512bd4;
    --rz-tabs-tab-selected-color: #ffffff;
    --rz-tabs-tab-selected-top-border-color: #512bd4;
}

@yordanov commented on GitHub (Mar 26, 2024): @timheuer you are right that text and background color should be applied to the same element. That's just been fixed with 510d94b. However, your styles could be optimized to take advantage of the available CSS variables. That said, with the current Radzen.Blazor version you can use the following to fix your styles: ```css .rz-tabview-nav .rz-tabview-selected { background-color: #512bd4; --rz-tabs-tab-selected-color: #ffffff; --rz-tabs-tab-selected-top-border-color: #512bd4; } ``` With the next version (containing 510d94b) your styles should work as they are, but you will also be able to further optimize: ```css :root { /* Applied to all tabs on page */ --rz-tabs-tab-selected-background-color: #512bd4; --rz-tabs-tab-selected-color: #ffffff; --rz-tabs-tab-selected-top-border-color: #512bd4; } ```

claunia commented

2026-01-29 17:48:38 +00:00

@akorchev commented on GitHub (Mar 26, 2024):

Last but not least all those CSS variables can be set via the style attribute of the component:

<RadzenTabs style="--rz-tabs-tab-selected-color: #ffffff; --rz-tabs-tab-selected-background-color: #512bd4;">

This has the advantage of having more than one tab visual configuration and not having to update the global styles.

@akorchev commented on GitHub (Mar 26, 2024): Last but not least all those CSS variables can be set via the style attribute of the component: ``` <RadzenTabs style="--rz-tabs-tab-selected-color: #ffffff; --rz-tabs-tab-selected-background-color: #512bd4;"> ``` This has the advantage of having more than one tab visual configuration and not having to update the global styles.

claunia referenced this issue

2026-01-29 18:19:08 +00:00

[PR #1076] [MERGED] RadzenDataGridColumn: handle non-px widths of frozen columns #2498

claunia referenced this issue

2026-01-29 18:19:09 +00:00

[PR #1076] RadzenDataGridColumn: handle non-px widths of frozen columns #2503

Sign in to join this conversation.