how to change the color of md-input-container placeholder when focus?

Question

I'm using angular 4 and I have an md-input-container that has a placeholder. when I type something in the input, the placeholder is shown as a label. how can I change the color of the placeholder in this situation?

 <md-input-container class="mb-1 data_font">
   <input mdInput placeholder="Full name">
 </md-input-container>

Answer 1

I'm usally working with mat-form-field as a wrapper for the input field.

<mat-form-field class="mb-1 data_font">
  <input mdInput placeholder="Full name">
</mat-form-field>

Now you can add the following code to your CSS:

.mat-focused .mat-form-field-label {
  color: red;
}

Keep in mind, if you want to change your color palette in general you should consider using a theme: https://material.angular.io/guide/theming