Change textbox border color when selected

[Corrado Di Blasio]

I tried to follow the documentation link but it doesn't seem to work.

My request is very basic, I need to change the border color of my textbox when it's selected, from the current reddish one to something else. What css should I target? I'm also using a floating label but it shouldn't matter

[Priyanka Karthikeyan]

Hi Corrado Di Blasio,

Thank you for reaching out to us!

To customize the border color of the textbox when it receives focus, please refer to the CSS styles provided below. These styles target the appropriate elements to achieve the desired effect:

 

​.e-float-input:not(.e-input-group) .e-float-line::before, .e-float-input:not(.e-input-group) .e-float-line::after ,
.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
  background: blue;
}

 

Sample: https://stackblitz.com/edit/angular-isbmyj-zstqnudp?file=src%2Fapp.component.html,src%2Fapp.component.css,package.json,src%2Findex.html

 

We appreciate your feedback and would like to inform you that we will be updating our documentation accordingly. The correction will be reflected in one of our upcoming releases.

Please feel free to reach out if you have any further questions or need additional assistance.

Regards,

Priyanka K

[Corrado Di Blasio]

Thank you, the snippet provided works but in my application I had to add ::ng-deep to bypass Angular's ViewEncapsulation

[Priyanka Karthikeyan]

Hi Corrado Di Blasio,

Thanks for the update. Yes, using ::ng-deep is a handy way to override styles when ViewEncapsulation is in place. Glad to hear the snippet worked for you!

Please feel free to reach out if you have any further questions or need additional assistance.

Regards,

Priyanka K