Change Line and floating label color

[David Wisenbaugh]

     Hi, I would like to know how to override the numeric textbox css to show blue instead of red/pink for the line and label color . 

thanks .

[Berly Christopher]

Hi David, 

  

Greetings from Syncfusion support. 

  

We can modify the float line of the NumericTextbox component with help of cssClass property as mentioned in the below styles overridden in the application. 

  

If you enabled the floatLabelType, then we can use the below styles for override the label and float line of the NumericTextBox component. 

  

<ejs-numerictextbox 

      cssClass="e-custom" 

      placeholder="Enter your age" 

    ></ejs-numerictextbox> 

<style> 

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

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

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

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

 background: blue; 

  } 

 

.e-custom.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text{ 

color:blue; 

  } 

</style> 

  

You can use the below styles when the floatLabelType is disabled in the NumericTextBox component. 

  

 <ejs-numerictextbox 

      cssClass="e-custom" 

      placeholder="Enter your age" 

    ></ejs-numerictextbox> 

<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/numericTextBox_float_line1252157327  

  

Else, if you want to change the UI colour of the component, we suggest you to use our Theme Studio option. By using this, you can customize the component based on the application needs and download and make use of in the application. 

  

Theme Studio: https://ej2.syncfusion.com/themestudio/?theme=material  

  

To know how to use theme studio, please follow the instructions provided in the below documentation.  

UG Link: https://ej2.syncfusion.com/documentation/appearance/theme-studio/ 

  

Regards, 

Berly B.C