How to change text(foreground) color when control is disabled

[Alberto Monteverdi]

I need to change the text color of a Vue ejs-textbox when the control is disabled.

I set the property :enabled='false' and I have the following situation:

<template>

     <div>

          <ejs-textbox cssClass='e-custom' :enabled='false'></ejs-textbox>

     </div>

</template>

<script>

...

</script>

<style>

.e-input-group.e-disabled.e-custom input.e-input,

.e-input-group.e-control-wrapper.e-disabled.e-custom input.e-input {

background-color: yellow; --> it works

font-style: italic; --> it works

font-weight: bold; --> it works

color: hotpink !important; --> DOESN'T WORK

    }

</style>

It seems that all the css properties are applied, but color is not.

Why?

Any help is appreciated.

Thank You in advance.

Alberto.

[Vignesh Srinivasan]

Hi Alberto, 

 

We have checked you reported query the color of the text inside the textbox component was not updated. It is because the text color for the disabled textbox is updated in the -webkit-text-fill-color attribute. Please find the code below. 

 

Code snippet: 

 

 

.e-input-group.e-disabled.e-custom input.e-input, 

.e-input-group.e-control-wrapper.e-disabled.e-custom input.e-input { 

  background-color: yellow; 

  font-style: italic; 

  font-weight: bold; 

  -webkit-text-fill-color: hotpink; 

} 

 

 

Screenshot: 

 

 

 

 

 

Sample: https://codesandbox.io/s/date-time-picker-floatlabel-forked-sqmo1?file=/src/App.vue 

 

Kindly check with the above sample. Please let us know if you need any further assistance. 

 

Regards, 

 

Vignesh Srinivasan. 

[Alberto Monteverdi]

Thank You Vignesh, it works perfectly.

Best Regards.

Alberto.

[Vignesh Srinivasan]

Hi Alberto, 

You are welcome. 

We are glad to know that the provided solutions worked for you. Please contact us if you require any further assistance. 

  

Regards, 

Vignesh Srinivasan.