角材デフォルトのCSS変更（md-select）

Question

ドロップダウンボックスでデフォルトのマテリアルブルーの色を「緑色」に変更することに興味があります。私はこの移行の責任を負うdivクラスを見つけることができません。タッチ時に下線ののborder-bottom-色を変更する材料ウェブサイト

1. から

   DEMO。

2. 保存されたオプションをタッチしたときにborder-bottom-colorを変更します。
3. ドロップダウンに保存されたデータが入力されたときの色の変更。
   

私は、フォームのラベルのためのCSS要素を変更することができましたが、MD-選択は悪夢であることです。スニッフィングされると、すべての要素の色がデフォルトの色の変化なしに（黒から青へ）変更されます。

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

Answer 1

また、次のように既定のCSSを上書きすることもできます。

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

プライマリパレットをカラーとして使用しているようです。したがって、md-selectのカスタムテーマを作成して使用することができます。

<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.module('myApp',['ngMaterial']) 
.config(function($mdThemingProvider) { 
$mdThemingProvider.theme('altTheme1') 
.primaryPalette('purple') 
$mdThemingProvider.theme('altTheme2') 
.primaryPalette('pink') 
}); 

は作業codepenです。

Answer 3

角度の入力、選択、ラジオボタンなどは、選択した主要テーマで機能します。デフォルトは青ですので、それを参照してください。あなたはカスタムプライマリテーマの色を定義することができ、すべての入力はそれを利用し始めます。

次のindex.jsメイン設定機能を追加してください。設定機能に$ mdThemingProviderを必ず注入してください。

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