How to customize a SfTextBox component

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

1 Reply 1 reply marked as answer

BC Berly Christopher Syncfusion Team January 11, 2021 12:50 PM UTC

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> 

  
  
Please refer the below documentation to know more about CSS customization of the Syncfusion components. 
  
Component 
Documentation Link 
TextBox 
ListView 
Tooltip 
Range slider 
DashboardLayout 
Sidebar 
Grid 
Dialog  
Inplace-editor  
RichTextEditor  
Splitter  
Toast  
Spinner  

  
Regards, 
Berly B.C  


Marked as answer
Loader.
Up arrow icon