Style appearance in Angular Numerictextbox component

6 Nov 20252 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the appearance of NumericTextBox wrapper element

Use the following CSS to customize the appearance of wrapper element.

/* To specify height and font size */
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input {
        height: 40px;
        font-size: 20px;
}

Customizing the NumericTextBox icons

Use the following CSS to customize the Numeric TextBox icons

/* To specify font size and background color */
.e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
        font-size: 20px;
        background-color: beige;
}

Customize the spin buttons up and down arrow in Angular 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);
  }
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
         NumericTextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // sets value to the NumericTextBox
    template: `
            <ejs-numerictextbox value='10'></ejs-numerictextbox>
            `
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));