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

md-autocomplete 里面有一个输入元素，所以你必须 :focus 输入元素。

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

Answer 2

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 3

当 md-autocomplete 被聚焦时，它的子元素 md-autocomplete-wrap 有类 md-menu-showing，所以你可以使用这个类并改变这个元素的颜色。

Answer 4

正如其他人所提到的，这是因为md-autocomplete元素本身没有获得焦点 - 相反，它有一个获得焦点的子输入元素。

你可以试试:focus-within。但是，这目前在 IE 或 Edge 中不起作用。