垫选择箭头转换下拉(向上和向下)

Question

我有一个垫选择下拉图标箭头，它是朝下的，当我点击它时，它变成朝上并打开下拉选项，当我再次点击箭头时，它又关闭了朝下的下拉图标，到目前为止还不错，但是当我选择其中一个选项并关闭下拉选项时，箭头不再朝下，除非我按住该选项。

我一直在尝试使用:focus进行此转换，但我似乎不知道如何使其正常工作。

我使用这个下拉:https://material.angular.io/components/select/overview(Angular 8中没有'mat-form-field')

我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度当选项被选中时，但无法使其工作。

Answer 1

您是否尝试使用:checked伪类将其恢复为正常?我认为你可以尝试类似于你的':focus':

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

你可以在这里检查:checked伪选择器