角材料默认CSS更改(md-选择)

Question

我感兴趣的是改变默认的材料蓝色的颜色，说“绿色”在下拉框。我无法找到的div类负责这一过渡，任何帮助非常感谢。

材料网站的演示

1. 在触摸时改变下划线的边框底色。

​

1. 更改保存选项时的边框-底色。

​

1. 使用保存的数据填充下拉列表时更改颜色。

​

我能够更改表单标签的CSS元素，但是md-select是一个噩梦。下面的片段会将所有元素的颜色更改为定义的颜色，而不需要默认的颜色转换(从黑色到蓝色)。

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

这是工作的码页。

Answer 3

角度材料输入，选择，单选按钮等工作的主要主题选定。默认值为蓝色，因此您可以看到这一点。您可以定义您的自定义主主题颜色和所有输入应该开始使用它。

放置以下index.js主配置函数。确保在配置函数中注入$mdThemingProvider。

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