角度材质默认CSS更改(md选择)

角度材质默认CSS更改(md选择),css,material-design,angular-material,md-select,Css,Material Design,Angular Material,Md Select,我想在下拉框中将默认材质的蓝色改为“绿色”。我找不到负责这个转换的div类,非常感谢任何帮助 从材料网站 触摸时更改下划线的边框底色。 触摸保存的选项时更改边框底色。 使用保存的数据填充下拉列表时更改颜色。 我能够更改表单标签的CSS元素,但是md select是一个噩梦。下面的“剪断”会将所有元素颜色更改为已定义的颜色,而无默认颜色转换(黑色到蓝色) 似乎它是使用主调色板作为它的颜色。因此,您可以为md选择一个自定义主题并使用它 <md-input-container> &

我想在下拉框中将默认材质的蓝色改为“绿色”。我找不到负责这个转换的div类,非常感谢任何帮助

从材料网站

  • 触摸时更改下划线的边框底色。
  • 触摸保存的选项时更改边框底色。
  • 使用保存的数据填充下拉列表时更改颜色。
  • 我能够更改表单标签的CSS元素,但是md select是一个噩梦。下面的“剪断”会将所有元素颜色更改为已定义的颜色,而无默认颜色转换(黑色到蓝色)


    似乎它是使用主调色板作为它的颜色。因此,您可以为
    md选择一个自定义主题并使用它

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

    这是工作流程。

    或者我们可以覆盖下面提到的默认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; 
    }
    

    角度材质输入、选择、单选按钮等用于选定的主主题。默认值为蓝色,因此您可以看到。您可以定义自定义主主题颜色,所有输入都应该开始使用它

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

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

    这将更改UI中所有元素的名称,而不仅仅是选择
    /* 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; 
    }
    
    $mdThemingProvider.theme('default').primaryPalette('cyan', { 'default': '700' });
    $mdThemingProvider.theme('default').accentPalette('blue-grey', { 'default': '500' });