CODEWITHSUNDEEP
cssmaterial-designangular-materialmd-select
Mad-D
Mad-D

Reputation: 4669

Angular Material Default CSS Change ( md-select )

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

  1. Changing the border-bottom-color of the underline upon touch. enter image description here
  2. Changing the border-bottom-color when the saved option is touched. enter image description here
  3. Changing the color when dropdown is populated with saved data.
    enter image description here

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

Upvotes: 1

Views: 7633

Answers (3)

Sumeet
Sumeet

Reputation: 391

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

Upvotes: 0

Mad-D
Mad-D

Reputation: 4669

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

Upvotes: 1

nextt1
nextt1

Reputation: 3988

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.

Upvotes: 1

Related Questions