如何更改 p-calendar primeng 中下拉菜单的颜色答案

【问题标题】：How to change the color of dropdown inside a p-calendar primeng如何更改 p-calendar primeng 中下拉菜单的颜色
【发布时间】：2019-08-27 09:18:13
【问题描述】：

我将 Angular 与 PrimeNg 一起使用。我想更改出现在primeng组件p-calendar内的下拉列表的选定元素的颜色我尝试使用JavaScript选择元素但未应用颜色。我还添加了一个选择器#calendar 以在我的组件中使用 viewchild，但我不知道这样我是否可以更改默认颜色。

有人知道这是否可能吗？

非常感谢

<p-calendar #calendar [inline]="inlineCalendar" [monthNavigator]="true" [yearNavigator]="true" [yearRange]="yearRangeValues" 
      [showButtonBar]="true" (onSelect)="onSelectDate($event)" (onMonthChange)="onSelectMonth($event)">

</p-calendar>


<p-calendar>
<select class="ui-datepicker-month ng-tns-c11-8 ng-star-inserted">
            <!--bindings={
  "ng-reflect-ng-for-of": "January,February,March,April,M"
}-->
            <option class="ng-tns-c11-8 ng-star-inserted" value="0">January</option>
            <option class="ng-tns-c11-8 ng-star-inserted" value="1">February</option>
            <option class="ng-tns-c11-8 ng-star-inserted" value="2">March</option>
            <option class="ng-tns-c11-8 ng-star-inserted" value="3">April</option>
            ...
        </select>
</p-calendar>

【问题讨论】：

标签： angular primeng

【解决方案1】：

您可以使用下面的 css 和 primeng 类来更改所选选项的颜色。

select.ui-datepicker-month:focus>option:checked{
  background-color: green;
}
select.ui-datepicker-year:focus>option:checked{
  background-color: red;
}

它将改变所选选项的颜色

这里是stackblitz

【讨论】：