The appearance of the MaskedTextBox can be changed by adding custom cssClass
to the component and enabling styles.
Refer to the following example to change the appearance of the MaskedTextBox.
import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
constructor(props) {
super(props);
this.onfocus = this.onfocus.bind(this);
}
onfocus(args) {
// sets cursor position at start of MaskedTextBox
args.selectionEnd = args.selectionStart;
}
render() {
return (<div>
<br />
<MaskedTextBoxComponent id="mask1" name="mask_value" placeholder="Enter user ID" floatLabelType='Always' mask="00000" cssClass="e-style" value="42648" focus={this.onfocus}/>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('masktextbox'));
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
margin: 0 auto;
width: 240px;
}
.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 ;
}
import { MaskedTextBoxComponent, MaskFocusEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component<{}, {}> {
constructor(props: any) {
super(props);
this.onfocus = this.onfocus.bind(this);
}
public onfocus(args: MaskFocusEventArgs) {
// sets cursor position at start of MaskedTextBox
args.selectionEnd= args.selectionStart;
}
public render() {
return (
<div>
<br/>
<MaskedTextBoxComponent id="mask1" name="mask_value" placeholder="Enter user ID" floatLabelType='Always' mask= "00000" cssClass="e-style" value= "42648" focus={this.onfocus}/>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('masktextbox'));