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

Question

md-input-container标签包含某个输入后如何改变颜色？我不希望它是灰色的，因为它看起来像是变灰了。例如，我想在输入字段包含输入后/当输入时更改标签“描述”的颜色。我尝试使用此代码修改 css 中的 md-input-container 标签，但它不起作用:

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

这是我的 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>

这是我的 Angular :

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

  });

这是我在 codepen 上的代码: http://codepen.io/zcook/pen/bpxGWJ

Answer 1

如果您希望标签颜色在​​有输入时发生变化，您可以使用...

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

如果您希望标签颜色在​​用户输入并移动焦点后发生变化，您可以使用...

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