Angular Material Default CSS-Änderung (md-select)

Question

Ich bin daran interessiert, die Standardfarbe blau zu ändern, um in der Dropdown-Box "grün" zu sagen. Ich bin nicht in der Lage, die für diesen Übergang verantwortliche div-Klasse zu finden, jede Hilfe, die ich sehr schätze.

DEMO von Materialien Webseite

1. die border-bottom-Farbe des Unterstrichs bei Berührung ändern.
2. Ändern der border-bottom-Farbe, wenn die gespeicherte Option berührt wird.
3. Ändern der Farbe, wenn das Dropdown-Menü mit gespeicherten Daten gefüllt ist.
   

konnte ich das CSS-Element für Form-Etiketten ändern, aber md-select ist ein Alptraum zu sein. Unterhalb abgeschnitten würde die gesamte Elementfarbe in eine definierte Farbe ohne Standard-Farbübergang (schwarz nach blau) geändert werden.

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

Answer 1

Oder wir könnten die Standard-CSS wie unten erwähnt überschreiben.

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

Answer 2

Scheint wie es ist, die primäre Palette zu verwenden, da es Farbe ist. So können Sie ein benutzerdefiniertes Thema für md-select erstellen und verwenden.

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

Hier ist die Arbeits codepen.

Answer 3

scharfkantiges Material Eingänge, Selects, Radiobuttons und etc Arbeiten am Hauptthema ausgewählt. Der Standardwert ist blau, Sie sehen das. Sie können Ihre benutzerdefinierte primäre Designfarbe definieren und alle Eingaben sollten beginnen, sie zu verwenden.

Geben Sie die folgende index.js-Hauptkonfigurationsfunktion ein. Stellen Sie sicher, dass Sie $ mdThemingProvider in die Config-Funktion injizieren.

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