Angular Material默認CSS更改（md-select）

Question

我有興趣將默認的材料藍色更改為下拉框中的“綠色”。 我找不到負責此過渡的div類，對此不勝感激。

來自材料網站的演示

1. 觸摸時更改下划線的邊框底部顏色。
2. 觸摸保存的選項時更改底部邊框的顏色。
3. 在下拉菜單中使用保存的數據填充時更改顏色。
   

我可以更改表單標簽的CSS元素，但md-select卻是一場噩夢。 如下所示，將所有元素顏色更改為已定義的一種，而無需默認顏色轉換（黑色到藍色）。

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

Answer 1

好像它正在使用“主調色板”作為其顏色。 因此，您可以為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') 
 });

這是工作碼本 。

Answer 2

或者我們可以如下所述覆蓋默認的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 3

角度材質輸入，選擇，單選按鈕等適用於所選的主要主題。 默認為藍色，因此您會看到。 您可以定義自定義的主主題顏色，所有輸入都應開始使用它。

放置以下index.js主要配置函數。 確保在配置函數中注入$ mdThemingProvider 。

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