How to customize a SfTextBox component

[David Evans]

I'm trying to change the pinkish default color of a SfTextBox bottom border in a Blazor server-side project. This is the onfocus color of the bottom border.

I'm using the Material theme. Can you give me examples of customizing a SfTextBox component?

Also, I always seem to run into a wall when trying to customize your components. Sometimes it's with pretty basic stuff like the border color.

Even after reading through your documentation. This is frustrating and time-consuming.

Can you give me some general pointers on customizing these components? I don't want to have to post in a forum just to change the color of a border.

Thanks,

Dave

[Berly Christopher]

Hi David, 

  

Greetings from Syncfusion support. 

  

We can change the border-color of the TextBox on focus action by overriding the input CSS styles with help of CssClass property.  

  

Please refer the below code snippet. 

  

<SfTextBox Placeholder='First Name' CssClass="e-custom"></SfTextBox> 

<style> 

    .e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, 

    .e-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, 

    .e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, 

    .e-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { 

        background: blue; 

    } 

</style> 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_border_161366592928456  

  

Please refer the below documentation to know more about CSS customization of the Syncfusion components. 

  

Component	Documentation Link
TextBox	https://blazor.syncfusion.com/documentation/textbox/how-to/customize-the-textbox-background-color-and-text-color/
ListView	https://blazor.syncfusion.com/documentation/listview/customizing-templates/#template
Tooltip	https://blazor.syncfusion.com/documentation/tooltip/style/
Range slider	https://blazor.syncfusion.com/documentation/range-slider/style/
DashboardLayout	https://blazor.syncfusion.com/documentation/dashboard-layout/style/
Sidebar	https://blazor.syncfusion.com/documentation/sidebar/style/
Grid	https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling/
Dialog	https://blazor.syncfusion.com/documentation/dialog/style/
Inplace-editor	https://blazor.syncfusion.com/documentation/in-place-editor/style/
RichTextEditor	https://blazor.syncfusion.com/documentation/rich-text-editor/style/
Splitter	https://blazor.syncfusion.com/documentation/splitter/style/
Toast	https://blazor.syncfusion.com/documentation/toast/style/
Spinner	https://blazor.syncfusion.com/documentation/spinner/style/

  

Regards, 

Berly B.C