Стрелка выбора мата для трансформации в раскрывающемся списке (вверх и вниз) ⇐ CSS

[Anonymous]

У меня есть стрелка раскрывающегося списка со значком выбора коврика, которая обращена вниз, и когда я нажимаю, она трансформируется вверх и открывает параметры раскрывающегося списка, а когда я снова нажимаю на стрелку, она снова закрывает раскрывающийся список, пока что хорошо, но когда я выбираю один из вариантов, и раскрывающийся список с выбранным параметром закрывается, стрелка больше не поворачивается вниз, пока я не удержу щелчок по этому параметру.
Я Я пытался использовать :focus для этого преобразования, но, похоже, не понимаю, как заставить его работать правильно.
Я использую этот раскрывающийся список: https://material. angular.io/comComponents/select/overview
(без поля mat-form-field в Angular 8)
Мой SCSS:

Код: Выделить всё

::ng-deep .mat-select-arrow {
border-left: 15px solid transparent !important;
border-right: none !important;
border-top: 15px solid transparent !important;
background-image: url(../../assets/icons/Icon_dropdown_Arrow_bottom.svg) !important;
background-image: no-repeat !important;

-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}

:focus {
&::ng-deep .mat-select-arrow {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
}

Этот код преобразует значок стрелки, который был направлен вниз, в значок стрелки вверх, но когда я нажимаю, чтобы выбрать параметр, он не возвращается в нормальное состояние (вниз), пока я не удержу нажатие. Как заставить его понять, что когда опция выбрана, она больше не должна быть в фокусе? Кажется, я не могу придумать здесь правильную трансформацию. Что мне не хватает?
Я пытался mat-select-option/mat-option снова преобразовать стрелку в 0 градусов, когда опция выбрана, но не смог заставить ее работать.< /п>

Подробнее здесь: https://stackoverflow.com/questions/728 ... p-and-down