Change background color when SfTextBox is disabled or read only

[Ben Junior]

The code below works for changing the background color of a SfTextBox but it doesn't when ReaOnly is set to true or the Enabled is set to false. I need to change the background under these two conditions, if possible.

<SfTextBox ID="IdNo" Value="@model.IdNo" CssClass="test" ></SfTextBox>

<style>

 .test{

        background-color: red !important;

    }

[Ponmani Murugaiyan]

Hi Ben, 

Greetings from Syncfusion support. 

You can achieve your requirement for the two cases (Readonly is set as true and Enabled is set as false) by override the below style in your application. Please find the code snippet and test sample for reference. 

[Index.razor] 

<style> 

    /*Change the background color if readonly state is true*/ 

    .e-input-group .e-input[readonly], 

    .e-input-group.e-control-wrapper .e-input[readonly], 

    .e-float-input input[readonly], 

    .e-float-input.e-control-wrapper input[readonly], 

    .e-float-input textarea[readonly], 

    .e-float-input.e-control-wrapper textarea[readonly] { 

        background: red; 

    } 

    /*Change the background color if enabled state is false and normal mode*/ 

    .e-input-group input.e-input, 

    .e-input-group.e-control-wrapper input.e-input, 

    .e-float-input input, 

    .e-float-input.e-control-wrapper input, 

    .e-input-group textarea.e-input, 

    .e-input-group.e-control-wrapper textarea.e-input, 

    .e-float-input textarea, 

    .e-float-input.e-control-wrapper textarea, 

    .e-input-group .e-input[disabled], 

    .e-input-group.e-control-wrapper .e-input[disabled], 

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

    .e-input-group.e-control-wrapper.e-disabled input.e-input, 

    .e-input-group.e-disabled textarea.e-input, 

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

        background: red; 

    } 

</style> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1661441847  

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Ben Junior]

Hi,

Thanks for your solution I was able to implement the required changes.  The only thing is that if the SfTextBox Multiline is set to true then the style keep its default of gray and it doesn't change, otherwise it does and works as expected.  

 <SfTextBox ID="Notes" Value="@(model.Notes)" Multiline="true" Enabled="false"/>

[Ponmani Murugaiyan]

Hi Ben, 

Thanks for the update. 

 

We can achieve the background color for Multiline textbox by override the below style. Please find the code snippet and test sample below for reference. 

 

[Index.razor] 

 

    /*Change the background color for Multiline state*/ 

    .e-input[disabled], 

    .e-input-group .e-input[disabled], 

    .e-input-group.e-control-wrapper .e-input[disabled], 

    .e-input-group.e-disabled, 

    .e-input-group.e-control-wrapper.e-disabled, 

    .e-float-input input[disabled], 

    .e-float-input.e-control-wrapper input[disabled], 

    .e-float-input textarea[disabled], 

    .e-float-input.e-control-wrapper textarea[disabled], 

    .e-float-input.e-disabled, 

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

        background: red; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11183886373  

 

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Ben Junior]

Hi,

Thanks so much for the sample. It works for all controls and the multiline too. The only thing is that for the multiline the  font color for the text still shows grayed (Please see attached picture) Would be possible to also be able to change the font color in this situation ? Or at least make it black like the others? 

Attachment: SfBackGroundDisabled_eb362d84.zip

[Ponmani Murugaiyan]

Hi Ben,   

  

Thanks for the update.  

 

We have validated your reported issue and provided the code snippet and test sample below for your reference to get rid of the reported issue. 

 

[Index.razor] 

 

<SfTextBox Placeholder="Enter your address" Enabled="false" Multiline="true" ></SfTextBox> 

<SfTextBox Placeholder="Enter your name" Enabled="false" ></SfTextBox> 

       

<style> 

 

    .e-multi-line-input.e-disabled { 

        opacity: 1; 

    } 

</style> 

 

OUTPUT: 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-335997627  

 

Kindly check with the above sample. Please get back us if you need further assistance.  

 

Regards,  

Ponmani M 

[Ben Junior]

Hi,

It works perfect! Thanks so much for your prompt support and assistance. 

Ben Junior

[Ponmani Murugaiyan]

Hi Ben,  

Thanks for your update.  

We have glad to hear that the provided suggestion helped you in achieving your requirement.  

Please get back to us if you need further assistance.  

Regards,  

Ponmani M