Change color for floating label when textbox is disabled

[Ciprian-Catalin]

Hi guys,

I want to change the color of the floating label for a textbox/numeric textbox if the textbox/numeric textbox is disabled.

These are the disabled textboxes:

And I want the label to have the color like this, from gray to black (only the floating label, without the border):

It is possible for a disabled input to have a custom color for the floating label?

Thank you

[Sureshkumar P]

We will validate the requirement in our component. We update you in two business days (April 29th, 2022).

[Sureshkumar P]

You can achieve your requirement by applying the below styles in your application.

Please find the CSS code example here:

.e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled

  .e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled

  .e-float-text.e-label-top,

.e-outline.e-float-input.e-control-wrapper.e-disabled

  input[disabled]

  ~ label.e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-disabled

  input[disabled]

  ~ label.e-label-top.e-float-text,

.e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,

.e-outline.e-float-input.e-control-wrapper

  input[disabled]

  ~ label.e-label-top.e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-disabled label.e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-disabled

  label.e-float-text.e-label-top,

.e-outline.e-float-input.e-control-wrapper:not(.e-error)

  input[disabled]

  ~ label.e-float-text,

.e-outline.e-float-input.e-control-wrapper:not(.e-error)

  input[disabled]

  ~ label.e-label-top.e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error)

  input[disabled]

  ~ label.e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error)

  input[disabled]

  ~ label.e-label-top.e-float-text,

.e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error)

  input[disabled]

  ~ label.e-float-text {

  color: black;

  -webkit-text-fill-color: black;

}

 

 

Find the sample here: https://stackblitz.com/edit/angular-j4rttz-lkgavc?file=app.component.css

[Ciprian-Catalin]

It worked, thank you again!

[Sureshkumar P]

Ciprian,

Thanks for your update.

Regards,

Sureshkumar P