CODEWITHSUNDEEP
cssangularjsangular-material
user1242321
user1242321

Reputation: 1696

Styling label inside md-input-container with css class

Is there a way to style the md-input label inside md-input-container using ng-class?

I am able to style it with inline css, but when a css class is applied to the label, it does not work?

Is that the expected behaviour(with any workaround?) or am I missing something?

CSS:

.red {
  color: red;
}

HTML:

<md-input-container class="md-block" flex-gt-xs="">
            <label class="red">Company (Disabled)</label>
            <input ng-model="user.company" disabled="">
          </md-input-container>

The label does not change color as it does with this code:

      <md-input-container class="md-block" flex-gt-xs="">
        <label style="color:red">Company (Disabled)</label>
        <input ng-model="user.company" disabled="">
      </md-input-container>

Please suggest!

Upvotes: 0

Views: 2394

Answers (4)

camden_kid
camden_kid

Reputation: 12813

Here you go, using ng-class - CodePen

Markup

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
  <md-input-container class="md-block" flex-gt-xs="">
    <label ng-class="{red: vm.label}">Company (Disabled)</label>
    <input ng-model="user.company" disabled="">
  </md-input-container>
</div>

CSS

.red {
  color: red;
}

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.label = true;
});

Upvotes: 0

Murali
Murali

Reputation: 324

css

md-input-container label { color : red;}

(or)

md-input-container { color : red;}

Upvotes: 0

Jigar7521
Jigar7521

Reputation: 1579

As per the standards you should use, theme concept if you are using a material angular js. Here is the whole idea.

By default your Angular Material application will use the default theme, a theme that is pre-configured with the following palettes for intention groups:

primary - indigo accent - pink warn - red background - grey (note that white is in this palette) Configuring of the default theme is done by using the $mdThemingProvider during application configuration.

You can specify a color palette for a given color intention by calling the appropriate configuration method (theme.primaryPalette, theme.accentPalette, theme.warnPalette, theme.backgroundPalette).

Like from official site of material angular : 

    angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {

  $mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });
});

believe me you will get better lubrication in your code. just follow :

Upvotes: 0

Jared Chu
Jared Chu

Reputation: 2862

try this:

md-input-container label.red{
  color: red
}

Or:

.red {
  color: red !important;
}

Upvotes: 1

Related Questions