Having trouble getting help?
Contact Support
Contact Support
Customize the spin buttons up and down arrow in EJ2 TypeScript Numerictextbox control
15 May 20233 minutes to read
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);
}
import {NumericTextBox} from '@syncfusion/ej2-inputs';
// initializes NumericTextBox component
let numeric: NumericTextBox = new NumericTextBox({
// sets value to the NumericTextBox
value: 10
});
// renders initialized NumericTextBox
numeric.appendTo('#numeric');
<!DOCTYPE html>
<html lang="en">
<head>
<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 Icons" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="numeric" type="text" />
</div>
</div>
</body>
</html>
#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 */