Angular material css md-autocomplete :focus

Question

I'm trying to use :focus on md-autocomplete to change the background color when the user press Keydown or Keyup.

It's work fine with :hover for the mouse :

md-autocomplete-parent-scope:hover{ color: rgb(63, 92, 154); }

but not with :focus.

Thanks.

Answer 1

I found a way to do it. I'm not sure it's the good solution but it's works.

.ng-scope .selected{
color: rgb(63, 92, 154);

}

Answer 2

When md-autocomplete is focused, then it's child element md-autocomplete-wrap has class md-menu-showing, so you can use this class and change the color for this element.

Answer 3

md-autocomplete has an input element inside, so you have to :focus the input element.

md-autocomplete input:focus {
    background-color: yellow;
}

Answer 4

As others have mentioned, this is because the md-autocomplete element itself does not get focus - instead it has a child input element that gets the focus.

You could try :focus-within. However this currently does not work in IE or Edge.