角度材质默认CSS更改（md-select）

Question

我有意将下拉框中的默认材质蓝色更改为“绿色”。我无法找到负责此转换的div类，非常感谢任何帮助。

DEMO从材料网站

1. 改变在触摸下划线的底部边框颜色。
2. 更改底部边框颜色时保存的选项被触摸。
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' });