Search results

Customize the UI appearance of the control in React MaskedTextBox component

18 May 2022 / 1 minute to read

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.

Source
Preview
index.jsx
styles.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
#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 ;
}
Copied to clipboard
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'));