Is there a way to dynamically change the color of an md-input-container label after certain input is added? The default grey color gives the impression that the field is disabled. I specifically want to modify the color of the label "Description" when the input field is no longer empty. I attempted to adjust the styling in the CSS using the following code, but it did not produce the desired effect:
md-input-container.md-default-theme label,
md-input-container.md-default-theme .md-placeholder {
color: #FDFE67 !important;
}
Below is the relevant HTML code:
<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>
And here is the AngularJS code snippet:
angular
.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('DemoCtrl', function($scope) {
});
If you'd like to view the code in action, it's also available on CodePen: http://codepen.io/zcook/pen/bpxGWJ