[Change border color and the text value color when control is disabled]

Question

Hello,I have a requirement to turn the color of the textbox's border and the color of the textbox's value to a darker color, like the label color, when the control is disabled. Now these two colors are shades of gray, I need to change them to black.Is there a way to achieve this?

Kokila Poovendran · Answer

Hi Ciprian-Catalin,Thank you for reaching out to us with your requirement. We have reviewed your query and prepared a sample based on your needs. The provided code snippet includes styles to change the border color of the textbox component when it is disabled.Here is the code snippet:

.e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus)
    label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus)
    label.e-float-text::after {
    border-color: black !important;
  }
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) {
    border-bottom-color: black;
    border-left-color: black;
    border-right-color: black;
  }

You can find a working sample on StackBlitz here: https://stackblitz.com/edit/angular-t45v4r-fnibwx?file=src%2Fapp.component.html,src%2Findex.html,src%2Fapp.component.css,src%2Fapp.component.tsPlease feel free to integrate this style into your application, and let us know if you have any further questions or if there's anything else we can assist you with.Documentation: https://ej2.syncfusion.com/angular/documentation/textbox/style-appearance Regards,Kokila Poovendran.

Ciprian-Catalin · Answer

Thank you for your response, it works for the border.Is there a way to change also the color of the value from the textbox?

Buvana Sathasivam · Answer

Hi Ciprian-Catalin,Thank you for reaching out! We understand that you're looking
to change the color of the value in a disabled textbox. You can achieve this by
applying the following styles in your app.component.css file:

.e-float-input input[disabled],
  .e-float-input.e-control-wrapper input[disabled] {
    -webkit-text-fill-color: blue;
  }

Sample: https://stackblitz.com/edit/angular-t45v4r-qrzrxg?file=src%2Fapp.component.html,src%2Findex.html,src%2Fapp.component.css,src%2Fapp.component.tsRegards,Buvana S