cssmaterial-designangular-materialmd-select

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

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