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.
<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>
public ActionResult customCss()
{
return View();
}
Output be like the below.