sm4 sm4 - 6 months ago 425
CSS Question

How to change the color of the item being selected in md-select in Angular Material?

I am using the dark theme in angular-material 1.0.4. This is how the select element looks like when selecting an item:

Selecting item in dark theme

And this is how it looks like when using the default theme:

Selecting item in default theme

The dark theme doesn't handle the color very well. How can I change the background color of the item being selected (light grey on the pictures), or the color of the text of the item?

I use only the default css:

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


And this is the definition of the 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>


And this is how I initialise the dark theme:

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


NOTE: The problem is not solved using a colour on mouse hover, because the item can be selected by keyboard as well.




EDIT: In the end, the answer was all about figuring out that the event, which colours the text, is "focus".

sm4 sm4
Answer

Here's a working solution:

md-option:focus{
    color: black;
}