Customize the UI appearance of Blazor Numeric TextBox Component

18 Jan 20221 minute to read

You can change the appearance of the NumericTextBox by adding custom CssClass to the component and enabling styles.

@using Syncfusion.Blazor.Inputs

<SfNumericTextBox TValue="int?" Value=10 CssClass="e-style" Placeholder="Enter value" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>

<style>
    .e-numeric.e-style .e-control.e-numerictextbox {
        color: royalblue;
        font-size: xx-large;
        border: 0px;
    }

    .e-input-group.e-style.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
        border-color: royalblue;
    }

    .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-down {
        color: royalblue;
    }

    .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before {
        background: royalblue;
    }

    .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
        background: royalblue;
    }

    .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-up {
        color: royalblue;
    }

    .e-control-wrapper.e-numeric.e-float-input.e-style.e-input-group .e-float-text.e-label-top {
        color: royalblue;
        font-size: medium;
    }
</style>