Radzen textarea color change

Radzen.Blazor Components
1

I have what might be a stupid question, im new to Radzen and development in general, one thing i cannot seem to figure out is simple CSS changes to the Radzen textarea, i can use the .rz-textarea to change the border color, background color etc, but when the textarea is active it uses the .rz-primary color to create a border, i cannot remove this active/focused border, change its color or anything. i have tried ::before and ::after, :focus and :active and honestly im losing my mind over something that should be straightforward

i have managed to change it for the likes of the rz-textbox using the ::before and ::after pursdo code. but nothing for the textarea component

can someone tell me what am i doing wrong here?

Thank you in advance for the help

2

Hi @Rusty,

You can use the CSS variables for styling. Inspect the element with the browser's devtools to see which particular variable you need to update. In your case this should be:

<RadzenTextArea Style="--rz-input-focus-border: 1px solid red;"

Depending on the theme you might have to update the box-shadow as well.

1 Like
3

Hi @yordanov
Thank you for the response, i guess im not following, when i inspect the element i see the following -
"textarea id="iTpK9ymmHU" rows="2" cols="20" aria-label="TextArea with placeholder" class="rz-textarea valid rz-state-empty" placeholder="Please provide a detailed message for our suppport team." tabindex="0" _bl_38b1a0e4-d09f-4f5c-9dae-275093cc185e="" data-dashlane-rid="dd76430f5bb23c46" data-dashlane-classification="other">textarea"

in my CSS code i can change a few of the CSS variables like the below

::deep .rz-textarea {
color: var(--secondary-color) !important;
border-color: var(--secondary-color) !important;
width: 29.2vw !important;
margin-top:5px !important;

}

::deep .rz-textarea:hover{
border-color:red !important;
}

i tired entering you Style in the mail HTML section but it does nothing,

<RadzenTextArea Placeholder="Please provide a detailed message for our suppport team." @bind-Value="supportForm.Message" Style="--rz-input-focus-border: 1px solid red;" aria-label="TextArea with placeholder" />

this is what i see when its active and when i have my mouse hovering 2 different colors

Screenshot 2024-11-22 222543
Screenshot 2024-11-22 223013

4

As I said:

For example, if you are using Material theme:

<RadzenTextArea Style="--rz-input-focus-border: 1px solid red;
                       --rz-input-focus-shadow: inset 0 0 0 1px red;" ... >

You CSS code does not update any CSS variable values, it just assigns CSS variables to the properties for color and border-color. I'd suggest to remove this code and update the css variables like this:

.rz-textarea {
    --rz-input-border: 1px solid var(--secondary-color);
    --rz-input-shadow: none;
    --rz-input-focus-border: 1px solid red;
    --rz-input-focus-shadow: inset 0 0 0 1px red;
}