CODEWITHSUNDEEP
angularangular-material2
Ayz Pat
Ayz Pat

Reputation: 135

Angular material 2 colour for input

Angular material 2 colour for input 

<md-input-container >
  <input type="password" md-input placeholder="password">

</md-input-container>

i want the colour to be changed on the click, How can I do that?

Upvotes: 2

Views: 3588

Answers (3)

Todd.Werelius
Todd.Werelius

Reputation: 66

Keep in mind that you don't want to go crazy with Material colors, they limit and assign them to various UI elements and states for a reason.

With that said ...

If you are asking how you change the color when the item has focus you can use the color="" attribute and set it to 'primary' 'default', 'accent', or 'warn' though this will violate some material principles since you are potentially signalling an incorrect state to your user when you do so. 

<md-input-container color='accent'>
  <input type="password" md-input placeholder="password">
</md-input-container>

Here's a plunker with the google company name set to 'accent'

If you just don't like the default colors then I suggest you could create your own theme

If you really want to go crazy you can overide the SASS input mixins for the input class

https://github.com/angular/material2/blob/0666207527299758293a9587a5b79212167a9a70/src/lib/input/_input-theme.scss

I don't suggest that though if you want to stick to the material design guidelines

If you are looking to set states that's a different question

Upvotes: 2

Martin
Martin

Reputation: 21

.mat-focused .mat-form-field-label {
    color: #5cb53f !important;
}

.mat-form-field-ripple {
    background-color: #5cb53f !important;
}

Upvotes: 0

Алексей Като
Алексей Като

Reputation: 7

https://material.angular.io/guide/theming

style.css 

.mat-dark {
      @include angular-material-theme($dark-app-theme);
      input {
        color: white;
      }
    }

<div class="mat-dark">
    <md-input-container>
       <input type="password" md-input placeholder="password">
    </md-input-container>
</div>

Upvotes: 0

Related Questions