Styling label inside md-input-container with css class

Question

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!

Jared Chu · Accepted Answer · 2016-10-14 04:05:02Z

1

try this:

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

Or:

.red {
  color: red !important;
}

answered Oct 14, 2016 at 4:05

Jared Chu

2,8624 gold badges30 silver badges41 bronze badges

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

2 Comments

user1242321 Over a year ago

Thanks @Jared Chu! Silly of me to not try that before putting the question here. It works! :)

Jared Chu Over a year ago

If it's worked please mark this answer is corrected :D

Jigar7521 · Accepted Answer · 2016-10-14 04:05:18Z

0

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 :

answered Oct 14, 2016 at 4:05

Jigar7521

1,5791 gold badge14 silver badges29 bronze badges

3 Comments

user1242321 Over a year ago

I am already using the theming provided by angular material. However, what would help to resolve the question is if you could suggest how I can show a label in a warning color provided by the theme(color of md-warn)?

Jigar7521 Over a year ago

@user1242321 : you just need to do is, give a class which you have defined it in a theme configuration. Let me give you a example : in case of button : <md-button class="md-default" ng-href="#/dashboard">Dashboard</md-button> <md-button class="md-hue-1" ng-href="#/dashboard">Dashboard</md-button> <md-button class="md-hue-2" ng-href="#/dashboard">Dashboard</md-button>

Jigar7521 Over a year ago

@user1242321 : Was it useful? otherwise let me know , i will provide you another global way.

Murali · Accepted Answer · 2016-10-14 04:07:44Z

0

css

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

(or)

md-input-container { color : red;}

answered Oct 14, 2016 at 4:07

Murali

3242 silver badges9 bronze badges

2 Comments

user1242321 Over a year ago

I want to apply the class dynamically using ng-class, so I am afraid this does not work.

Murali Over a year ago

try this ng-class={ 'md-input-container ' : true}

camden_kid · Accepted Answer · 2016-10-14 07:58:00Z

0

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;
});

answered Oct 14, 2016 at 7:58

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Collectives™ on Stack Overflow

Styling label inside md-input-container with css class

4 Answers 4

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related