如何在ngbPopover弹出时修改自定义Select的边框颜色？

我明白你遇到的问题——:focus和:active伪类确实不太适合这个场景，因为它们的触发逻辑和popover的打开/关闭状态不完全匹配：active只在鼠标按下瞬间生效，松开就消失；focus需要元素可聚焦，而且点击页面非聚焦元素时不一定会触发失焦。

这里有个更可靠的方案：利用NgbPopover的isOpen状态动态添加CSS类，直接绑定popover的打开状态来控制边框样式。

步骤1：修改HTML模板，绑定动态类 #

首先，给你的主<div>添加[ngClass]绑定，关联popover的isOpen属性（通过模板引用变量#q获取）。同时，记得在选项的点击事件中阻止冒泡，避免点击选项时意外关闭popover：

<div [ngbPopover]="Category" triggers="click:click" placement="bottom-left" #q="ngbPopover" 
     class="select" 
     [ngClass]="{'select-open': q.isOpen}"
     (document:click)="q.close()" 
     (click)="$event.stopPropagation()">
 {{ selectedCategory || 'All'}}
 <ng-template #Category class="options">
   <div *ngFor="let category of categories" 
        (click)="selectedCategory = category.value; $event.stopPropagation()" 
        class="option" 
        [ngClass]="{selected: category.value === selectedCategory}">
     {{ category.value }}
   </div>
 </ng-template>
</div>
<span class="caret"></span>

步骤2：添加打开状态的CSS样式 #

接下来，在你的CSS中新增一个针对select-open类的样式，替换原来的:active伪类：

.select {
 display: inline-block;
 border: 1px solid #e5e5e5;
 color: #272727;
 font-weight: 400;
 font-size: 1.4rem;
 width: 95%;
 cursor: pointer;
 padding: 0.6rem 1.2rem;
 /* 可选：添加过渡动画让边框变化更平滑 */
 transition: border-color 0.2s ease;
}

/* 当popover打开时应用这个样式 */
.select.select-open {
 border-color: yellow;
}

/* 可以移除原来的:active样式，因为不再需要它了 */
/* .select:active {
 border: 1px solid yellow;
} */

/* 保留你原来的其他样式 */
.options {
 width: 100%;
}
.option {
 width: 100%;
 padding: 0.5rem 2rem;
 cursor: pointer;
 color: #333;
 font-size: 1.4rem;
 font-family: Montserrat, sans-serif;
}
.option:hover {
 background-color: #f5f5f5;
}
.caret {
 margin-left: -2.5rem;
}
.selected, .selected:hover {
 background-color: #4c59a8;
 color: #fff;
}
:host>>>ngb-popover-window {
 padding: 0;
 color: #adadad;
 width: calc(95% - 3rem);
 max-width: 100%;
 max-height: 24rem;
 overflow-y: scroll;
 display: block;
 border-radius: 0;
 position: absolute;
}
:host>>>ngb-popover-window>.popover-header {
 display: none;
}

为什么这个方案有效？ #

NgbPopover的模板引用变量q的isOpen属性会实时同步popover的状态：

• 点击主div打开popover时，isOpen变为true，select-open类被自动添加，边框颜色切换为黄色；
• 点击页面其他区域或关闭popover时，isOpen变为false，select-open类被移除，边框恢复原来的#e5e5e5颜色。

这个方法完全贴合popover的实际状态，不会出现伪类触发时机不匹配的问题。

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