How do I customize the SfNumericTextBox style when Enabled is false?

[Christopher]

Hello,

I haven't been able to find a way to customize the SfNumericTextBox label, input, or outline when `Enabled=false`.

In my app, this component is currently not visible when `Enabled=false`.

Can you please provide the appropiete CSS classes I can use to modify the component?

Thanks!

[Kokila Poovendran]

Hi Christopher,

We have validated your query and prepared a sample to demonstrate how to customize the style of the SfNumericTextBox when it is disabled. Below is an example of how you can achieve this using CSS:

<SfNumericTextBox TValue="int?" Value=10 Enabled=false CssClass="disabled"></SfNumericTextBox>

<style>

    .disabled.e-disabled {

        background-color: beige !important;

        color: red !important;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/embed/rNVJZmtoCVbzpbJh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

In this example, we use the CssClass property to add a custom class (custom-disabled) to the SfNumericTextBox. Then, we define the styles for this class when the component is disabled using the .e-disabled class.

Feel free to modify the CSS styles as needed to match your application's design.

If you have any further questions or need additional assistance, please let us know.

Regards,
Kokila Poovendran.

[Christopher]

Hello, thanks for your reply and sample. 

I just tried this out but it doesn't seem to work. In the image below is the Css class I've declared, and the Numeric component on the right. 

Below is the definition for the Numeric that I'm using:

​

<SfNumericTextBox @bind-Value="@SomeDouble" Placeholder="Amount" FloatLabelType="@FloatLabelType.Auto" Min="0" Currency="@ISO4217Code" Format="c2" Enabled="false" HtmlAttributes="@NumericTextBoxAttributes" CssClass="disabled" />

I am using Syncfusion 24.1.43

Thank you,

Christopher

[Bem Addun]

To customize the style of the SfNumericTextBox when it is disabled (Enabled is false), you can use the following CSS:

css
.e-numeric.e-disabled {
  background-color: #f5f5f5;
  border-color: #ccc;
  color: #999;
}

.e-numeric.e-disabled .e-input-group-icon {
  color: #999;
}

This CSS targets the SfNumericTextBox component when it has both the "e-numeric" and "e-disabled" CSS classes. It sets the background color, border color, and text color to indicate that the component is disabled.Additionally, it targets the input group icon (the spin buttons) and sets its color to match the disabled text color.You can include this CSS in your application's stylesheet or in a <style> block to apply the custom styles to the disabled SfNumericTextBox

Temu, an online shopping platform, is offering significant discounts through two prominent coupon codes: ACT200019 and ACP856709. 

1. Download the Temu app, available for both iPhone and Android devices.

2. Browse through the wide range of products available on the platform.

3. Add desired items to your cart.

4. During the checkout process, enter either ACT200019 or ACP856709 in the coupon code field.

5. Apply the code to see the discount reflected in your total.

[Christopher]

Hello,

That also didn't work, unfortunately.

I was able to change the color by using the following selector:

.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 {

    -webkit-text-fill-color: red;

}

The above selector and style allowed me to change the color of the label, value, and spin buttons.

Is there an easier way to find these selectors? Currently, it seems pretty trivial.

Thanks,

Christopher

[Kokila Poovendran]

Hi Christopher,

You can set the color of the text using a simpler CSS selector. Please find the sample style below:

<style>

   

    .e-numeric.e-input-group.e-control-wrapper {

        -webkit-text-fill-color: red;

    }

</style>

You can use this CSS selector to change the color of the label, value, and spin buttons more efficiently. This approach reduces the complexity of finding and applying styles to specific elements.

Here's a link to a sample demonstrating this approach: Blazor Playground Sample