Angular
Demos
Support
Forum
Download
Search results

Change the floating label color of the TextBox

You can change the floating label color of the TextBox for both success and warning validation states by applying the following CSS styles.

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

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
   .e-float-input.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
    }
Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `<div class="wrap">
                <div class="e-float-input e-input-group e-success">
                    <input type="text" (focus)="focusIn($event.target)" (blur)="focusOut($event.target)" required/>
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Success</label>
                </div>
                <div class="e-float-input e-input-group e-warning">
                    <input type="text"(focus)="focusIn($event.target)" (blur)="focusOut($event.target)" required/>
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Warning</label>
                </div></div>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    public focusIn(target: HTMLElement): void {
        target.parentElement.classList.add('e-input-focus');
    }

    public focusOut(target: HTMLElement): void {
        target.parentElement.classList.remove('e-input-focus');
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Previous
Next