0

Here's my code. I have a md-autocomplete and I want to change the font color of the placeholder of the chip.

<md-chips flex class="md-accent" ng-model="vm.job.skills"
                  readonly="vm.isExpired"
                  md-autocomplete-snap
                  md-transform-chip="vm.transformSkillChip($chip)">
            <!-- Skill tags autocomplete -->
            <md-autocomplete class="md-accent" md-search-text="searchText"
                             md-items="item in vm.querySkills(searchText)"
                             md-item-text="item.name"
                             placeholder="Enter skill tags for search"
                             md-delay="200"
                             id="inputSkillTags">
                <span md-highlight-text="searchText">{{item.name}}</span>
            </md-autocomplete>
            <md-chip-template>
                <span class="md-body-1">{{$chip}}</span>
            </md-chip-template>
        </md-chips>
  • With css: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css – Aliz Apr 06 '16 at 07:53
  • Probably duplicate of http://stackoverflow.com/questions/36354597/change-css-of-placeholder-text-of-md-autocomplete – Bettimms Apr 06 '16 at 07:54

1 Answers1

0

Apply your styling to the ::placeholder pseudo-element.

.md-chip-input-container input::placeholder {color:deeppink !important;}

I found the !important property was necessary to override the color setting.

jim31415
  • 8,588
  • 6
  • 43
  • 64