Customize the ui appearance of the control in EJ2 TypeScript Numerictextbox control
15 May 20234 minutes 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.
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
numeric.appendTo('#numeric1');
<!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 cssClass" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/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="numeric1" type="text" name=numericValue/>
</div>
</div>
<style>
.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 {
color:royalblue;
}
.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 ;
}
</style>
</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;
}