Angular 4 material md-input style css

Question

I have a input component from angular material:

<input mdInput placeholder="Name" disabled floatPlaceholder="never">

I have two issue:

1. How do I change the underline to bold from dotted when in disabled state?
2. I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select).

Answer 1

1. How do I change the underline to bold from dotted when in disabled state?

Use ViewEncapsulation to override default styles with your custom styles. In your component.css, add the following styles:

.mat-form-field-underline.mat-disabled {
  background-image:linear-gradient(to right,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) 100%,transparent 0);
  /* Set 4px for a solid line */
  background-size : 4px 4px; 
}

.. and in your component.ts file, set encapsulation to ViewEncapsulation.None:

import { ViewEncapsulation } from '@angular/core';

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

---

2. I know the APIs don't specifically say it but is there any way to to make the floatPlaceholder property work here. (The API only mentions the use of this property for md-select).

Add the floatPlaceholder attribute on <md-form-field> instead of <input>:

<md-form-field floatPlaceholder="never">
    <input mdInput placeholder="Name" disabled >
</md-form-field>

Here is a link to complete working demo.

Answer 2

You can change the underline from dotted to bold with something like this:

.mat-input-underline.mat-form-field-underline.mat-disabled {
background-image: linear-gradient(90deg,rgba(0, 0, 0, 0.66) 0,rgba(0, 0, 0, 0.66) 0,rgb(0, 0, 0));
height: 2px;
background-size:  4px 2px;
}

Answer 3

1) To change the underline to normal from dotted when disabled apply the following css:

.mat-form-field-underline.mat-disabled {
  background-color: rgba(0,0,0,.42) !important; // this is the default color
  background-image: none !important; // the dotted line is an image, this will remove it
}

2) To enable floatPlaceholder you need to apply it on the container, and not the input:

  <md-form-field floatPlaceholder="never">
    <input mdInput placeholder="Name" disabled>
  </md-form-field>