如何用CSS判断PrimeNG的p-dropdown是否已选中值？

PrimeNG的p-dropdown组件和p-inputtext一样，使用**p-filled类来标识已选中值的状态；聚焦状态下两者均使用p-focus**类。

结合你给出的代码，要实现输入框和下拉框在已填充/选中、聚焦状态下的统一边框样式，可以修改CSS如下：

/* p-inputtext 已输入、聚焦状态样式 */
.p-inputtext:enabled.p-filled,
.p-inputtext:enabled.p-focus {
    border: 1px solid $twenty;
}

/* p-dropdown 基础样式 */
::ng-deep .p-dropdown {
    background-color: initial;
    border: solid 1px #ddd;
    border-radius: 0;
    min-width: 30rem;
    height: 5.5rem;
    width: 100%;
}

/* p-dropdown 已选中状态样式 */
::ng-deep .p-dropdown.p-filled {
    border-color: $twenty;
}

/* p-dropdown 聚焦状态样式 */
::ng-deep .p-dropdown.p-focus {
    border-color: $twenty;
}

说明 #

• 当p-dropdown有选中值时，组件根元素会自动添加p-filled类，通过该类即可选中已完成选择的下拉框。
• 聚焦状态通过p-focus类控制，确保两个组件在交互时的样式表现一致。

内容的提问来源于stack exchange，提问作者Asaf Abekasis