How to change the underline color of md-input-container in angular4?

user_4415079 0
Viewed 28497

I have been reading the docs for this (https://material.angular.io/components/input/overview) There is a section that says how to change the color of the line at the bottom of the md-input-container. But it is not clear to me what an attribute is nor is there a code example to refer to. It says the underline color can be changed using the color attribute of the md-input-container. In addition what I mean by underline is the animated underline that expands out as visible in the provided link. Could somebody explain more clearly what the attribute of md-input-container is, or provide some code. I have tried adding a directive called color, changing the color of md-input-container in css, amongst other things and I am not succeeding at this. If somebody could explain/show some code that demonstrates this, that would be very helpful. Thanks!

Here is some code, which I feel should work, based on the wording of that text. But it does not.

  <md-input-container
    color="yellow"
    class="input-half-width">
    <input
      [(ngModel)]="driftInfo.title"
      name="title"
      mdInput
      placeholder="Ange rubrik"
    >
  </md-input-container>

enter image description here

angular-material2 material-design angular
11 Answers

Change Colour Of Md-Input and Label When MAT-FOCUSED :

label on focus colour change:

.mat-focused .mat-form-field-label {
    color: #027D7C !important;
}

Input on focus colour change:

.mat-form-field-ripple {
    background-color: #027D7C !important;
}
user_86075990

Add this in yout component encapsulation: ViewEncapsulation.None it works in angular 6

example :

import {Component, Injectable, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  encapsulation: ViewEncapsulation.None
})

and in CSS file add the code

example :

.mat-form-field-label {
    color: white !important;
}
.mat-form-field-underline {
    background-color: white !important;;
}
.mat-form-field-ripple {
    background-color: white !important;
}
user_82155110

Using angular material 7.3 this is working for me - to change the underline when textbox has the focus:

(in global styles.scss)

.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #69f0ae !important;
  }
user_21916420

This is how I removed mine in Angular 6.0.1

I know its for removing the underline, but you can follow the same procedure to change color e.t.c. Thanks

::ng-deep .mat-form-field-underline {
    display: none;
}
user_19369250

for Angular 10

component.sccs

    :host ::ng-deep .mat-form-field-underline {
        background-color: white !important; 
     }
     :host ::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple {
     background-color: white !important;
}
:host ::ng-deep input {
    color: white !important;
}
:host ::ng-deep input {
    color: white !important;
}

component.html

 <form>
    <mat-form-field>
        <mat-label id="placeholder" class="buscador">Buscar...</mat-label>
        <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" type="text" name="option" required minlength="3">
        <mat-autocomplete #auto="matAutocomplete" name="option">
            <mat-option *ngFor="let option of options | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>
user_67235740

For angular 6+, We can just add styles line in the typescript (.ts) file of your project in the @Component section.

styles: [':host ::ng-deep .mat-form-field-underline {height: 0px!important}']

The overall code design should be like this:

@Component({
  selector: '',
  templateUrl: '',
  styleUrls: [''],
  styles: [':host ::ng-deep .mat-form-field-underline {height: 0px!important}']
})

This works for me.

user_83509140
user_80865490

In your CSS file add 

.mat-form-field-underline {
    background-color: black !important; // change black with your color
}
user_80412830
Related