Changing default css in Angular Material for md-input

问题:

I have implemented form using angualr-material, I can't find any standard ways to change default color coding in material.

form

    <div class="col-xs-12 testFormLabel">                 <md-input-container class="testLabel">                     <label>Reason</label>                         <input name="reasonBox" id="reasonBox" ng-model="obj. reasonBox" ng-required="true">                   </md-input-container>     </div>

css

.md-input-has-value. testLabel > input {     color:#008cba;       }

Problem

How can i change auto focus label name and underline to different color ( let say from dark blue to green )

回答1:

You can use this selector to change the input:

md-input-container:not(.md-input-invalid).md-input-focused .md-input {     border-color: red }

Use this to change the label:

md-input-container:not(.md-input-invalid).md-input-focused label {     color: red }

Include this after you include the css for angular material.

I got this by going to the docs page here: https://material.angularjs.org/latest/demo/input

Looking at their demo, and inspecting a focused input.

回答2:

You can also use <md-input-container [dividerColor]="primary|accent|warn"> to set the color when the field is in focus.

From the docs...

The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to the theme primary color. Alternatively, accent or warn can be specified to use the theme's accent or warn color.

转载请标明出处:Changing default css in Angular Material for md-input

文章来源: Changing default css in Angular Material for md-input