How do i change md-input-container placeholder color using css in angular material

问题

How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.

回答1:

Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.

As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.

So you just need to apply this CSS:

/* When the input is not focused */
md-input-container label {
  color: red;
}

/* When the input is focused */
md-input-container.md-input-focused label {
  color: blue;
}

Have a look at this Plunkr Demo.

回答2:

in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class

html :

<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>

css:

.mat-focused .placeholder {
    color: #00D318;
}

回答3:

As @Wenacary told in this post: How to change Angular 5 Material input placeholder?

In the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class

html :
<mat-form-field>
    <input matInput type="text">
    <mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
    color: #00D318;
}

回答4:

In Angular 4+

First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).

In dummy.component.ts:

@Component({
 ...,
 encapsulation: ViewEncapsulation.None,
})

Then give your < mat-form-field > element a unique class in dummy.component.html:

<mat-form-field class="dummy-input-field" floatPlaceholder="always">
  <input placeholder="Dummy"/>
</mat-form-field>

Finally in dummy.component.css apply the styling:

.dummy-input-field .mat-input-placeholder {
  color: red;
}

Similarly, if you'd like to dynamically change color if the field is focused:

.dummy-input-field.mat-focused .mat-input-placeholder {
  color: red;
}

回答5:

For the newer versions of material which have a mat prefix instead of md prefix, you can do this in 2 ways:

way 1: using view encapsulation set to none and then writing the styles in the components css file, like @user2245995 pointed out in the answer above. Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.

way 2: We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example

/deep/ label.mat-input-placeholder {
  color: #fff;   // choose the color you want
}

Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated. read more: https://angular.io/guide/component-styles#!#-deep-

回答6:

.container {
  .mat-form-field-outline,
  .mat-form-field-empty.mat-form-field-label,
  .mat-form-field-label,
  .mat-form-field-underline,
  .mat-input-element,
  ::placeholder {
    color: $white !important;
  }
}

The code above gives me the results below. I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text.

I'm using Angular 8.2.2 and Angular Material 8.2.2

来源：https://stackoverflow.com/questions/41205931/how-do-i-change-md-input-container-placeholder-color-using-css-in-angular-materi

标签

css

angularjs-material