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

Question

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>

Solution 1

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;
}

Solution 2

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;
}

Solution 3

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;
  }

Solution 4

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;
}

Solution 5

I solved it like this

::ng-deep .mat-input-underline{
    border-bottom: 1px solid red!important;
}

View more solutions