如何在Angular Material中更改md-select中所选项目的颜色?

时间:2016-02-03 06:25:17

标签: css angularjs material-design angular-material

我在角度材质1.0.4中使用黑暗主题。这是选择项目时select元素的样子:

Selecting item in dark theme

这就是使用默认主题时的样子:

Selecting item in default theme

黑暗主题不能很好地处理颜色。如何更改所选项目的背景颜色(图片上的浅灰色)或项目文本的颜色?

我只使用默认的css:

<link rel="stylesheet" href="lib/angular-material/angular-material.css">

这是select的定义:

        <md-input-container flex="30">
            <label>Branch</label>
            <md-select ng-model="selectedBranch">
                <md-option ng-repeat="b in branches" value="{{b.id}}">
                    {{b.name}}
                </md-option>
            </md-select>
        </md-input-container>

这就是我初始化黑暗主题的方式:

app.config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .dark()
        .primaryPalette('orange')
        .accentPalette('yellow')
        .warnPalette('deep-orange');
});

注意:鼠标悬停时使用颜色无法解决问题,因为该项目也可以通过键盘选择。

编辑:最后,答案是关于弄清楚为文字着色的事件是&#34;焦点&#34;。

3 个答案:

答案 0 :(得分:1)

md-option:hover{
  color: black; 
}

应该做的伎俩。

答案 1 :(得分:0)

md-option ._md-text{
 color:green;
}

或(取决于版本)

md-option .md-text{
        color:green;
}

选择器+图标:

md-select ._md-text{
        color:white;
}

//drop down icon : 
md-select ._md-text{display:inline}._md-select-value ._md-select-icon{
        color: white;
}

答案 2 :(得分:0)

这是一个有效的解决方案:

md-option:focus{
    color: black;
}