Trying to change Background Color Disabled Radzen Numeric

Radzen.Blazor Components
1

Hi, I'm trying to change the background color of the RadzenNumeric (to begin with) since gray is not well distinguished on iPhones.

I have tried to use chrome's html inspection in order to locate the class and override the css.

so I'm trying to override the css with:

.rz-spinner.rz-state-disabled {
background-color: blue
}

but I don't get the expected result.

I have tried to do the same thing on Radzen textbox inspected like

and applying

.rz-textbox.rz-state-disabled{
background-color:red
}

And here if obtained the correct result.

But I can't figure out what I'm doing wrong with the Radzen Numeric.

Greetings and thanks for your work.

2

Hello @Javier1,

You can use the following CSS to override the disabled state:

.rz-spinner.rz-state-disabled .rz-inputtext {
    background-color: red;
    color: yellow;
}

If you prefer to use the newly introduced custom CSS properties (CSS variables), try this:

.rz-spinner {
    --rz-input-disabled-background-color: red;
    --rz-input-disabled-color: yellow;
}

The first approach replaces the so called CSS variables used in the component with hardcoded background and text color values, while the second approach assigns these color values to the respective CSS variable in use.

1 Like