React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Customize the spin button’s up and down arrow in React NumericTextBox component

This section explains about how to change/customize spin up and down icons. You can customize spin button icons using e-spin-up and e-spin-down classes of those buttons.

You can override the default icons of e-spin-up and e-spin-down classes using the following CSS code snippets.

  .e-numeric .e-input-group-icon.e-spin-up:before {
    content: "\e823";
    color: rgba(0, 0, 0, 0.54);
  }
  .e-numeric .e-input-group-icon.e-spin-down:before {
    content: "\e934";
    color: rgba(0, 0, 0, 0.54);
  }
Source
Preview
index.tsx
styles.css
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}/>, document.getElementById('numericContainer'));
#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;
  padding-top: 100px;
}

/* csslint ignore:start */
.e-numeric .e-input-group-icon.e-spin-up:before {
  content: "\e823";
  color: rgba(0, 0, 0, 0.54);
}

.e-numeric .e-input-group-icon.e-spin-down:before {
  content: "\e934";
  color: rgba(0, 0, 0, 0.54);
}
/* csslint ignore:end */
Previous
Next