Angular Material Default CSS Change ( md-select )

Question

I'm interested in changing the default material blue color to say "green" in dropdown box. I am not able to find the div class responsible for this transition, any help much appreciated.

DEMO from materials Website

Changing the border-bottom-color of the underline upon touch.
Changing the border-bottom-color when the saved option is touched.
Changing the color when dropdown is populated with saved data.

I was able to change the CSS element for form labels but md-select is being a nightmare. below snipped would change all the element color to defined one without default color transition ( black to blue ).

.md-text.ng-binding{
    color: orangered;
}

nextt1 · Accepted Answer · 2017-02-24 18:26:07Z

Seems like it is using Primary Palette as it's color. So you can make a custom theme for md-select and use it.

<md-input-container>
 <label>Number</label>
 <md-select ng-model="number" placerholder="Number">
  <md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
    {{num}}
  </md-option>
 </md-select>
</md-input-container>

<md-input-container md-theme="altTheme1">
 <label>Number</label>
 <md-select ng-model="number" placerholder="Number">
  <md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
    {{num}}
  </md-option>
 </md-select>
</md-input-container>

<md-input-container md-theme="altTheme2">
 <label>Number</label>
 <md-select ng-model="number" placerholder="Number">
  <md-option ng-repeat="num in [1,2,3,4,5,6,7,8,9,0]" value="{{num}}">
    {{num}}
  </md-option>
 </md-select>
</md-input-container>

Angular Code:

angular.module('myApp',['ngMaterial'])
.config(function($mdThemingProvider) {
 $mdThemingProvider.theme('altTheme1')
 .primaryPalette('purple') 
 $mdThemingProvider.theme('altTheme2')
 .primaryPalette('pink') 
 });

Here is the working codepen.

Mad-D · Accepted Answer · 2017-02-27 17:13:16Z

1

Or we could overwrite the default css as mentioned below.

/* css style to change the bottom line color in dropdown options */
md-select:not([disabled]):focus .md-select-value{
    border-bottom-color: #008cba;
}

/* css style to change mini warning message upon touch */
md-input-container.md-input-focused:not(.md-input-has-value) md-select .md-select-value.md-select-placeholder {
    color: #008cba; 
}

answered Feb 27, 2017 at 17:13

Mad-D

4,70919 gold badges58 silver badges93 bronze badges

Comments

user5420817 · Accepted Answer · 2017-07-05 19:40:22Z

0

Angular Material Inputs, Selects, Radio buttons and etc work on the primary theme selected. Default is blue so you see that. You can define your custom primary theme color and all inputs should start utilizing it.

Put the following index.js main config function. Make sure to inject $mdThemingProvider in the config function.

$mdThemingProvider.theme('default').primaryPalette('cyan', { 'default': '700' });
$mdThemingProvider.theme('default').accentPalette('blue-grey', { 'default': '500' });

answered Jul 5, 2017 at 19:40

user5420817

1 Comment

Sumit Over a year ago

this will change the them of all the elements in the UI not just the select

Collectives™ on Stack Overflow

Angular Material Default CSS Change ( md-select )

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related