Changing default css in Angular Material for md-input

Question

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 )

mariocatch · Accepted Answer · 2016-02-03 01:43:03Z

8

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.

edited Feb 3, 2016 at 1:43

answered Feb 3, 2016 at 0:06

mariocatch

8,72312 gold badges52 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mad-D Over a year ago

Thanks, but i couldn't change the label color from blue.

mariocatch Over a year ago

Why not? Inspect the page and see why this rule isn't being accepted.

Mad-D Over a year ago

it is but border-color applies to the underline not to the label.

mariocatch Over a year ago

Edited answer with label coloring technique.

Kizmar · Accepted Answer · 2017-01-24 19:26:57Z

0

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.

answered Jan 24, 2017 at 19:26

Kizmar

2,6134 gold badges22 silver badges27 bronze badges

1 Comment

Leonel Thiesen Over a year ago

Just for clarification, this answer is about Angular2+, but the OP asked about AngularJS (version 1).

Collectives™ on Stack Overflow

Changing default css in Angular Material for md-input

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related