Change font of disabled TextArea

Radzen.Blazor Components
1

I've seen this post link describing how to use Deep and Divs with CSS. Which helped. But I still cannot customize the font of a Disabled TextArea.

<div>    
    <RadzenCard Variant="Variant.Outlined" class="rz-background-color-primary-light rz-shadow-0 rz-border-radius-0 rz-p-8" style="margin: 1rem calc(-1 * var(--rz-card-padding));">
        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Auto-resize TextArea</RadzenText>
        <RadzenTextArea  
                        placeholder="Trying to customize this text's font."                         
                        Style="width: 100%;--rz-input-focus-border: 5px solid green;" aria-label="Auto-resize"
                        class="disabledInputCssClass">
            
        </RadzenTextArea>
    </RadzenCard>
</div>

the CSS

::deep .disabledInputCssClass {
    background-color: black;
    color:white;
}

If I removed the Disabled attribute of the RadzenTextArea, then the font is as expected.

How can I adjust the font when it is Disabled?

If needed created repo at GitHub - skippyV/RadzenTesting

2

Hi @SkippyV,

You should use the dedicated custom CSS properties:

<RadzenTextArea Disabled="true" Style="--rz-input-disabled-color: red; --rz-input-disabled-placeholder-color: darkred;" ... >

or in your case:

::deep .disabledInputCssClass {
    background-color: black;
    color:white;
    --rz-input-disabled-color: red; 
    --rz-input-disabled-placeholder-color: darkred;
}
2 Likes
3

Thank you! Thank you!