How to customize UI appearance in ASP.NET MVC MaskedTextBox

17 Aug 20261 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.

@Html.EJS().MaskedTextBox("mask4").Mask("00000").Value("42648").CssClass("e-style").Placeholder("Enter user ID").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Focus("onfocus").Render()

<script>
  function onfocus(args) {
    //sets cursor position at start of MaskedTextBox
    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>
public ActionResult customCss()
{
    return View();
}

Output be like the below.

MaskedTextBox Sample