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

Question

我正在使用 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>

Answer 1

您可以使用下面的css和primeng class来改变选中选项的颜色。

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

它会改变所选选项的颜色

这里是stackblitz

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

How to change the color of dropdown inside a p-calendar primeng

primeng

angular