Customize background and text color in Blazor TextBox component

2 Feb 20261 minute to read

To customize the background and text color of the Blazor TextBox component, you can use custom CSS styles along with the Syncfusion Blazor TextBox component. Below are the steps to achieve this customization:

@using Syncfusion.Blazor.Inputs

<SfTextBox Placeholder='Name'></SfTextBox>

<style>
    .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-float-input input, .e-float-input.e-control-wrapper input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input, .e-float-input textarea, .e-float-input.e-control-wrapper textarea, .e-input-group .e-input[disabled], .e-input-group.e-control-wrapper .e-input[disabled], .e-input-group.e-disabled input.e-input, .e-input-group.e-control-wrapper.e-disabled input.e-input, .e-input-group.e-disabled textarea.e-input, .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
        background-color: orange;
        color: white;
    }
</style>

NOTE

Use custom CSS classes if you wish to apply the styles conditionally to specific TextBox components.