Radio button background colour

Radzen.Blazor Components
1

in Radzen, is there a setting i can use to change the background colour of a radio button list?
i.e. if i select Yes, can i make the label and area around the selected radio green, likewise No, can i make the No label and selected radio Red ?

2

similar to this
image

image
image787×93 1.38 KB

3

Hi @TMRGlobal,

This is achievable in a couple of CSS lines.

First you need to add a CSS class to your items:

<Items>
    <RadzenRadioButtonListItem Text="Yes" Value="1" Class="option-yes" />
    <RadzenRadioButtonListItem Text="No" Value="2" Class="option-no" />
</Items>

Next you can use the :has() CSS pseudo class to style the item if it contains an active radio button (if there is a .rz-state-active CSS class applied). Here is an example:

/* Add item padding and border-radius */
.option-yes,
.option-no {
    padding: 0.25rem;
    border-radius: 0.25rem;
}

/* Colorize the active item */
.option-yes:has(.rz-state-active) {
    color: white;
    background-color: green;
}
.option-no:has(.rz-state-active) {
    color: white;
    background-color: red;
}
4

hmm okay i'm hoping there is a more dynamic approach to this as we are starting on a radzen based form reader. what we might have to do is create a CSS insert or something along those lines and reference each question on the form, so generically we might have.....

.q1-option-yes,
.q1-option-no,
.q2-option-yes,
.q2-option-no {
padding: 0.25rem;
border-radius: 0.25rem;
}

/* Colorize the active item */
.q1-option-yes:has(.rz-state-active) {
color: white;
background-color: green;
}
.q1-option-no:has(.rz-state-active) {
color: white;
background-color: red;
}

.q2-option-yes:has(.rz-state-active) {
color: white;
background-color: green;
}
.q2-option-no:has(.rz-state-active) {
color: white;
background-color: red;
}

etc....
unless there is a simpler alternate???

5

You can add the same CSS class to multiple questions. CSS class is not an ID and you don't need to assign a unique class name to each item. In fact, that's the nature of CSS classes - to be able to apply the same style to multiple items, without having to write styles again and again...

That said, you can apply the same Class="option-yes/no" to each Yes/No answer respectively.

You can include the CSS styles in a css file after the theme.css, or inline via a <style> </style> tag.

6

yep that's fair enough, the complexity comes from allowing users the ability to define their own background colours, so it's reasonable to expect all yes's will be green and no's will be red, there are instances where that logic is reversed, such as "are you unhappy with our service? "
a no would be a green response while yes would be red. so given that we need to cater for each item individually