Search results

Customize the UI appearance of the control in JavaScript NumericTextBox control

30 Mar 2023 / 1 minute to read

You can change the appearance of the NumericTextBox by adding custom cssClass to the component and enabling styles. Refer to the following example to change the appearance of the NumericTextBox.

Copied to clipboard
import { NumericTextBox } from '@syncfusion/ej2-inputs';

// initializes the NumericTextBox component
let numeric: NumericTextBox = new NumericTextBox({
    // sets value to the NumericTextBox
    value: 10,
    placeholder: 'Enter value ',
    floatLabelType: 'Always',
    //adding custom css class to NumericTextBox
    cssClass: 'e-style'

// renders initialized NumericTextBox
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript NumericTextBox Component with Custom cssClass" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <input id="numeric1" type="text" name=numericValue/>
  .e-numeric.e-style .e-control.e-numerictextbox  {
    color: royalblue ;
    font-size: xx-large ;
    border: 0px ;
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
    border-color: royalblue;
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-down  {
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before {
    background: royalblue ;
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
    background: royalblue ;
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-up {
    color:royalblue ;
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-text.e-label-top {
    color: royalblue ;
    font-size: medium ;

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;