插入文本后如何更改md-input-container标签的标签颜色

Question

How do you change the colour of md-input-container label after it contains a certain input? I don't want it to be grey, because it makes it look like it's greyed out. For example, i want to change the colour of the label "Description" after/when the input field contains an input. I have tried modifying md-input-container label in css by using this code but it doesn't work :

md-input-container.md-default-theme label,   
md-input-container.md-default-theme .md-placeholder {  
    color: #FDFE67 !important; 
} 

Here is my html:

<div ng-app="MyApp" ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage">
  <md-content layout-padding="">
    <div>
      <form name="userForm">
        <md-input-container class="md-block">
          <label>Input-autofocus</label>
          <input ng-model="user.firstName" type="text" autofocus>
        </md-input-container>

        <md-input-container class="md-block">
          <label>Input-md-autofocus</label>
          <input ng-model="user.title" type="text" md-autofocus>
        </md-input-container>
      </form>
    </div>
  </md-content>
</div>

Here is my angular :

angular
  .module('MyApp', ['ngMaterial', 'ngMessages'])
  .controller('DemoCtrl', function($scope) {

  });

Here is my code on codepen: http://codepen.io/zcook/pen/bpxGWJ

Answer 1

If you want the label colour to change when it has input you can use...

.md-inline-form md-input-container.md-input-has-value label{
  color: red;
}

If you want the label color to change after a user entered input an moved focus away you can use...

.md-inline-form md-input-container.md-input-has-value:not(.md-input-focused) label{
 color: red;
}