2016-04-25 4 views
0

特定の入力が含まれた後にmd-input-containerラベルの色を変更するにはどうすればよいですか?グレーであるように見えるので、グレーではありません。たとえば、入力フィールドに入力が含まれていると、/の後に「Description」というラベルの色を変更したいとします。私はこのコードを使用して、CSSのMD-入力-容器ラベルを変更しようとしたが、それは動作しません。ここでテキストが挿入された後に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 
    .module('MyApp', ['ngMaterial', 'ngMessages']) 
    .controller('DemoCtrl', function($scope) { 

    }); 

はcodepenに私のコードです: http://codepen.io/zcook/pen/bpxGWJ

+0

を変更するにはどのようなラベル "Description"ですか? –

+0

[CSSセレクタとして入力値属性を使用することはできますか?](http://stackoverflow.com/questions/10645552/is-it-possible-to-use-an-input-value-attribute -as-a-css-selector) –

答えて

1

ラベルの共同をしたい場合それはあなたが使用することができ、入力を持っているときに、ユーザーが移動フォーカスが離れてあなたが使用することができ、入力を入力した後、ラベルの色を変更したい場合はlourは...

.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; 
} 
+0

フィードバックありがとうございますが、動作しません:( –

+0

私はコードサンプルで作業しています。[http://codepen.io/bslocm/pen/wGEGwe?エディタ= 1100]。 –

関連する問題