How to have Angular2-MDL-ext Select placeholder grayed out

Question

Is it possible to have the select placeholder grayed out coherently with other Angular 2 MDL form fields?

This is what I can obtain with default settings:

<mdl-textfield type="text" label="CAP..." formControlName="postcode" floating-label></mdl-textfield><br>
<mdl-textfield type="text" label="Città..." formControlName="city" floating-label></mdl-textfield><br>
<mdl-textfield type="text" label="Provincia..." formControlName="province" floating-label></mdl-textfield><br>
<mdl-select
      placeholder="Nazione"
      formControlName="countryid">
   <mdl-option value="0"></mdl-option>
   <mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option>
</mdl-select>

The select placeholder "Nazione" appears in black. I'd like to have it grayed out just as the field "Cap...", "Città...", "Provincia...".

Answer 1

mdl2-angular-ext 0.6.0 should have proper placeholders now. You example code is correct, but for anyone else visiting this question, here's the code (again):

<mdl-select placeholder="Nazione" formControlName="countryid"> <mdl-option value="0"></mdl-option> <mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option> </mdl-select>

Unrelated to your question, but since it was discussed in the comments regarding the question, the floating-label property works now too.

<mdl-select floating-label placeholder="Nazione" formControlName="countryid"> <mdl-option value="0"></mdl-option> <mdl-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mdl-option> </mdl-select>