CODEWITHSUNDEEP
angularangular-materialangular-material2
HBK
HBK

Reputation: 735

Angular 4 material md-input style css

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).

Upvotes: 4

Views: 5848

Answers (3)

FAISAL
FAISAL

Reputation: 34673

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.

Upvotes: 7

Z. Bagley
Z. Bagley

Reputation: 9260

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>

Upvotes: 1

Joshua Craven
Joshua Craven

Reputation: 4545

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

Upvotes: 1

Related Questions