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.