Customize the UI appearance of the control

17 Feb 20221 minute to read

The appearance of the MaskedTextBox can be changed by adding custom cssClass to the control and enabling styles.
Refer to the following example to change the appearance of the MaskedTextBox.

CSHTML

<ejs-maskedtextbox id="mask1" name="mask_value1" mask="00000" value='42648' placeholder="Enter user ID" cssClass="e-style" floatLabelType="Always" focus="onfocus.bind(this)"></ejs-maskedtextbox>
<script>
    function onfocus(args) {
        args.selectionEnd = args.selectionStart;
    }
</script>

<style>
    .e-mask.e-style .e-control.e-maskedtextbox {
        color: #00ffff;
        letter-spacing: 10px;
        font-size: xx-large;
        border: 1px;
        border-color: #ffffff;
    }

    .e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before {
        background: #ffffff;
    }

    .e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
        background: #ffffff;
    }

    .e-control-wrapper.e-mask.e-float-input.e-style .e-float-text.e-label-top {
        color: #00ffff;
        font-size: medium;
    }
</style>

CustomCss.cs

public ActionResult customCss()
{
    return View();
}

Output be like the below.