Search results

Styles and Appearances in Angular TextBox component

08 Dec 2022 / 2 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 TextBox wrapper element

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

Copied to clipboard
/* 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

Use the following CSS to customize the TextBox placeholder

Copied to clipboard
/* 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;
}

Toggle password visibility using eye icon

You can show text or hide text by showing character instead of actual text in angular textbox by following below steps.

  • Add eye icon using addIcon method.
  • In the click event of icon added above, toggle the text visibility by changing the type of element.
Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
Copied to clipboard
import { Component, Inject, ViewChild } from '@angular/core';
import {
  TextBoxComponent,
  NumericTextBoxComponent,
} from '@syncfusion/ej2-angular-inputs';
@Component({
  selector: 'app-root',
  styleUrls: ['app/app.component.css'],
  templateUrl: 'app/app.component.html',
})
export class AppComponent {
  @ViewChild('default', { static: true })
  public textbox: TextBoxComponent;
  ngAfterViewInit() {
this.textbox.addIcon('append', 'e-icons e-input-eye');
document
  .getElementsByClassName('e-input-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';
    }
  });
  }
}
Copied to clipboard
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
    declarations: [AppComponent], imports: [BrowserModule, FormsModule, TextBoxModule], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div class="col-lg-8 control-section multiline">
    <div class="content-wrapper">
        <div class="multiline-row">
            <ejs-textbox id="password" width="190px" #default type="password" placeholder="Enter your Password" floatLabelType="Auto"  required></ejs-textbox>
        </div>
    </div>
</div>
<style>
      .e-input-eye:before {
        content:'\e345';
        font-family: e-icons;
        font-size: 13px;
    }
  </style>