Style and Appearance Customization for Angular TextBox

8 Oct 202513 minutes to read

Easily customize the appearance of the Syncfusion Angular TextBox to match your application’s theme and usability requirements. This guide covers fundamental and advanced styling techniques including CSS class usage, validation state colors, floating labels, dynamic value-based color changes, rounded corners, password visibility toggling, and accessibility best practices.

Understanding TextBox CSS Structure

The TextBox component uses a hierarchical CSS class structure that allows targeted styling of different component states and elements. The main classes include:

  • .e-input - Base input element
  • .e-float-input - Floating label wrapper
  • .e-input-group - Input group container
  • .e-control-wrapper - Primary wrapper element

Tip: Use browser DevTools to inspect elements and identify these classes for easier targeting.

Customizing the TextBox wrapper element

The wrapper element controls the overall appearance and layout of the TextBox. Use the following approaches to customize its appearance:

Basic Height and Font Sizing

/* To specify height and font size */
.e-input:not(:valid), .e-input:valid, .e-float-input.e-control-wrapper input:not(:valid), .e-float-input.e-control-wrapper input:valid, .e-float-input input:not(:valid), .e-float-input input:valid, .e-input-group input:not(:valid), .e-input-group input:valid, .e-input-group.e-control-wrapper input:not(:valid), .e-input-group.e-control-wrapper input:valid, .e-float-input.e-control-wrapper textarea:not(:valid), .e-float-input.e-control-wrapper textarea:valid, .e-float-input textarea:not(:valid), .e-float-input textarea:valid, .e-input-group.e-control-wrapper textarea:not(:valid), .e-input-group.e-control-wrapper textarea:valid, .e-input-group textarea:not(:valid), .e-input-group textarea:valid {
        font-size: 30px;
        height: 40px;
}

Customizing the TextBox placeholder

Placeholder text can be styled for both floating and static label scenarios:

Floating Label Customization

/* To specify font size and color */
.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {
        color: pink;
        font-size: 15px;
}

Change the floating label color of the TextBox

The Angular TextBox component supports floating labels that can be customized with different colors based on validation states. This guide demonstrates how to change the floating label color for success and warning validation states using CSS styling.

The floating label color can be modified for different validation states using CSS. The component applies specific classes (e-success, e-warning) when validation states are set, allowing targeted styling.

CSS styling for validation states

Apply the following CSS styles to customize floating label colors for success and warning states:

/* For Success state */
.e-float-input.e-input-group.e-success label.e-float-text,
.e-float-input.e-input-group.e-success input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-success input:valid ~ label.e-float-text {
    color: #22b24b;
}

/* For Warning state */
.e-float-input.e-input-group.e-warning label.e-float-text,
.e-float-input.e-input-group.e-warning input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-warning input:valid ~ label.e-float-text {
    color: #ffca1c;
}

Implementation example

The following example demonstrates how to configure TextBox components with floating labels and apply validation states to trigger color changes:

import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        TextBoxModule,
        FormsModule 
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <ejs-textbox placeholder="Success" floatLabelType="Auto" cssClass="e-success"></ejs-textbox>
                <ejs-textbox placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"></ejs-textbox>
              </div>`
})

export class AppComponent {

}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

/* For Success state */
.e-float-input.e-input-group.e-success label.e-float-text,
.e-float-input.e-input-group.e-success input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-success input:valid ~ label.e-float-text {
    color: #22b24b;
}

/* For Warning state */
.e-float-input.e-input-group.e-warning label.e-float-text,
.e-float-input.e-input-group.e-warning input:focus ~ label.e-float-text,
.e-float-input.e-input-group.e-warning input:valid ~ label.e-float-text {
    color: #ffca1c;
}

Set the rounded corner in Angular TextBox component

The TextBox component can be rendered with rounded corners by adding the e-corner CSS class to the cssClass property. This styling enhancement improves the visual appearance and provides a modern look to the input field.

Note: The rounded corner styling is visible only in box model input components (standard input elements with visible borders).

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        TextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                 <ejs-textbox placeholder="Enter Date" cssClass="e-outline e-corner"></ejs-textbox>
              </div>`
})

export class AppComponent {
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

.e-outline.e-input-group.e-control-wrapper, 
.e-outline.e-input-group, 
.e-outline.e-input-group:not(.e-float-icon-left), 
.e-outline.e-float-input, 
.e-outline.e-float-input.e-control-wrapper, 
.e-outline.e-input-group:not(.e-float-icon-left), 
.e-outline.e-input-group.e-success:not(.e-float-icon-left), 
.e-outline.e-input-group.e-warning:not(.e-float-icon-left), 
.e-outline.e-input-group.e-error:not(.e-float-icon-left), 
.e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left), 
.e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), 
.e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), 
.e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
  border-radius: 20px
}

Toggle password visibility using eye icon

The TextBox component supports password visibility toggling through icon integration. This feature allows users to show or hide password text by clicking an eye icon.

Implementation Steps

Add an eye icon using the addIcon method and handle click events to toggle text visibility by changing the input element’s type attribute.

import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'



import { Component, Inject, ViewChild } from '@angular/core';
import {
  TextBoxComponent,
  NumericTextBoxComponent,
} from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [ FormsModule, TextBoxModule],


standalone: true,
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild('default', { static: true })
  public textbox?: TextBoxComponent;
  ngAfterViewInit() {
    (this.textbox as TextBoxComponent).addIcon('append', 'e-icons e-eye');
    document
      .getElementsByClassName('e-eye')[0]
      .addEventListener('click', function (e) {
        let textObj: any = (document.getElementById('password') as any)
          .ej2_instances[0];
        if (textObj.element.type === 'password') {
          textObj.element.type = 'text';
        } else {
          textObj.element.type = 'password';
        }
      });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change TextBox Color Based on Its Value in Angular

Dynamically changing the TextBox color based on user input provides immediate visual feedback and enhances user experience. This technique is particularly useful for form validation, data entry scenarios, and creating interactive interfaces where color coding helps users understand input requirements or validity status.

Implementation Overview

The color change functionality can be implemented by combining event handling with conditional CSS styling. The approach involves listening to input events, validating the entered value, and applying appropriate CSS classes based on the validation results.

Basic Implementation

The following example demonstrates how to change TextBox color based on numeric value validation using the keyup event:

import { FormsModule } from '@angular/forms'
import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        TextBoxModule,
        FormsModule
    ],
standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <label> Normal Input </label>
                    <ejs-textbox 
                    placeholder = "Enter numeric values" (keyup)="onKeyup($event)"></ejs-textbox>
                 <label> Floating Input </label>
                 <ejs-textbox 
                    placeholder = "Enter numeric values" floatLabelType="Auto" (keyup)="onKeyup($event)"></ejs-textbox>
              </div>`
})

export class AppComponent {
    public onKeyup(event: any): void {
        let str = event.target.value.match(/^[0-9]+$/);
        if (!((str && str.length > 0)) && event.target.value.length) {
        event.target.parentElement.classList.add('e-error');
        } else {
        event.target.parentElement.classList.remove('e-error');
        }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));