Example 1: angular material input
Html TS import {Component} from '@angular/core'; /** * @title Basic Inputs */ @Component({ selector: 'input-overview-example', styleUrls: ['input-overview-example.css'], templateUrl: 'input-overview-example.html', }) export class InputOverviewExample {} CSS .example-form { min-width: 150px; max-width: 500px; width: 100%; } .example-full-width { width: 100%; }
Example 2: stylin mat input
//Standard .mat-form-field { .mat-input-element { color: slategray; } .mat-form-field-label { color: slategray; } .mat-form-field-underline { background-color: slategray; } .mat-form-field-ripple { background-color: slategray; } .mat-form-field-required-marker { color: slategray; } } //Focus .mat-form-field.mat-focused { .mat-form-field-label { color: #ff884d; } .mat-form-field-ripple { background-color: #ff884d; } .mat-form-field-required-marker { color: #ff884d; } .mat-input-element { color: #ff884d; } } //Error .mat-form-field.mat-form-field-invalid { .mat-input-element { color: #ff33cc; } .mat-form-field-label { color: #ff33cc; .mat-form-field-required-marker { color: #ff33cc; } } .mat-form-field-ripple { background-color: #ff33cc; } }
Comments
Post a Comment