SelectBar background colour formatting #1352

New Issue

claunia · 2026-01-29T17:52:29Z

claunia commented

2026-01-29 17:52:29 +00:00

Originally created by @paritoshromy on GitHub (Aug 19, 2024).

It will be good if we can specify the background colour for selected and unselected bar item. Also the button style.

Originally created by @paritoshromy on GitHub (Aug 19, 2024). It will be good if we can specify the background colour for selected and unselected bar item. Also the button style.

claunia added the enhancement label 2026-01-29 17:52:29 +00:00

claunia closed this issue

2026-01-29 17:52:29 +00:00

claunia commented

2026-01-29 17:52:30 +00:00

@yordanov commented on GitHub (Oct 17, 2024):

You can adjust background and text colors via CSS variables. Here is an example:

<RadzenSelectBar @bind-Value=@value TValue="bool" class="my-warning-selectbar">
    <Items>
        <RadzenSelectBarItem Text="On" Value="true" />
        <RadzenSelectBarItem Text="Off" Value="false" />
    </Items>
</RadzenSelectBar>

<style>
    .my-warning-selectbar {
        --rz-selectbar-background-color: var(--rz-warning-lighter);
        --rz-selectbar-color: var(--rz-on-warning-lighter);
        --rz-selectbar-selected-background-color: var(--rz-warning);
        --rz-selectbar-selected-color: var(--rz-on-warning);
    }
</style>

@code {
    bool value;
}

@paritoshromy, does this resolve the issue?

@yordanov commented on GitHub (Oct 17, 2024): You can adjust background and text colors via CSS variables. Here is an example: ```css <RadzenSelectBar @bind-Value=@value TValue="bool" class="my-warning-selectbar"> <Items> <RadzenSelectBarItem Text="On" Value="true" /> <RadzenSelectBarItem Text="Off" Value="false" /> </Items> </RadzenSelectBar> <style> .my-warning-selectbar { --rz-selectbar-background-color: var(--rz-warning-lighter); --rz-selectbar-color: var(--rz-on-warning-lighter); --rz-selectbar-selected-background-color: var(--rz-warning); --rz-selectbar-selected-color: var(--rz-on-warning); } </style> @code { bool value; } ``` @paritoshromy, does this resolve the issue?

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1352