Angular Material 默认 CSS 更改 ( md-select )
Angular Material Default CSS Change ( md-select )
我有兴趣将下拉框中的默认 material 蓝色更改为 "green"。我找不到负责此转换的 div class,非常感谢任何帮助。
DEMO 来自 material 网站
- 触摸时更改下划线的边框底部颜色。
- 触摸保存的选项时更改边框底部颜色。
- 当下拉菜单填充保存的数据时更改颜色。
我能够更改表单标签的 CSS 元素,但是 md-select 是一场噩梦。 below snipped 会将所有元素颜色更改为没有默认颜色转换(黑色到蓝色)的定义颜色。
.md-text.ng-binding{
color: orangered;
}
它的颜色似乎使用了 Primary Palette。因此,您可以为 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代码:
angular.module('myApp',['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('altTheme1')
.primaryPalette('purple')
$mdThemingProvider.theme('altTheme2')
.primaryPalette('pink')
});
这是工作 codepen。
或者我们可以覆盖默认值 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;
}
Angular Material 输入、选择、单选按钮等在选定的主要主题上工作。默认是蓝色的,所以你看到了。您可以定义自定义主要主题颜色,所有输入都应开始使用它。
放置以下index.js主要配置函数。确保在配置函数中注入 $mdThemingProvider。
$mdThemingProvider.theme('default').primaryPalette('cyan', { 'default': '700' });
$mdThemingProvider.theme('default').accentPalette('blue-grey', { 'default': '500' });
我有兴趣将下拉框中的默认 material 蓝色更改为 "green"。我找不到负责此转换的 div class,非常感谢任何帮助。
DEMO 来自 material 网站
- 触摸时更改下划线的边框底部颜色。
- 触摸保存的选项时更改边框底部颜色。
- 当下拉菜单填充保存的数据时更改颜色。
我能够更改表单标签的 CSS 元素,但是 md-select 是一场噩梦。 below snipped 会将所有元素颜色更改为没有默认颜色转换(黑色到蓝色)的定义颜色。
.md-text.ng-binding{
color: orangered;
}
它的颜色似乎使用了 Primary Palette。因此,您可以为 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代码:
angular.module('myApp',['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('altTheme1')
.primaryPalette('purple')
$mdThemingProvider.theme('altTheme2')
.primaryPalette('pink')
});
这是工作 codepen。
或者我们可以覆盖默认值 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;
}
Angular Material 输入、选择、单选按钮等在选定的主要主题上工作。默认是蓝色的,所以你看到了。您可以定义自定义主要主题颜色,所有输入都应开始使用它。
放置以下index.js主要配置函数。确保在配置函数中注入 $mdThemingProvider。
$mdThemingProvider.theme('default').primaryPalette('cyan', { 'default': '700' });
$mdThemingProvider.theme('default').accentPalette('blue-grey', { 'default': '500' });