Angular中如何修改下拉选项hover状态的背景颜色？

我一直在寻找Angular表单中修改下拉选项hover背景色的方案，默认情况下下拉选项hover时显示蓝色背景，需要改为粉色。

我的表单HTML结构：

<div class="form-group">
  <label for="supportHierarchy">Support Hierarchy</label>
  <select id="supportHierarchy" [(ngModel)]="flag.supportHierarchy" name="supportHierarchy" class="form-control custom-select">
    <option class="custom-option" [value]="'Yes'">Yes</option>
    <option class="custom-option" [value]="'No'">No</option>
  </select>
</div>

尝试的CSS代码：

option:hover,
option:checked,
option:active,
option:focus {
  background: linear-gradient(#5a0c6f, #5a0c6f);
}

.custom-option:hover,
.custom-option:checked,
.custom-option:active,
.custom-option:focus {
  background: linear-gradient(#5a0c6f, #5a0c6f);
}

.custom-option:hover {
  background-color: red !important;
}

核心问题：上述CSS仅在给select添加size属性强制展开时生效，正常收起后展开的下拉框，hover效果完全不生效，试了多种方法均未解决。

1. 明确原生select的样式限制 #

原生<select>的下拉菜单属于浏览器原生控件（由操作系统渲染），大部分CSS伪类（如hover）在默认下拉状态下无法生效——这是浏览器的安全与样式隔离机制导致的，纯CSS很难在原生select上实现自定义hover背景色。

2. 推荐方案：使用Angular Material的mat-select #

Angular Material的下拉组件完全由Web元素构成，支持自定义所有交互样式，步骤如下：

• 安装并导入Angular Material模块：

// app.module.ts
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    MatFormFieldModule,
    MatSelectModule,
    FormsModule
  ]
})
export class AppModule { }

• 修改HTML结构为mat-select：

<div class="form-group">
  <label for="supportHierarchy">Support Hierarchy</label>
  <mat-form-field appearance="fill">
    <mat-select [(ngModel)]="flag.supportHierarchy" name="supportHierarchy">
      <mat-option [value]="'Yes'">Yes</mat-option>
      <mat-option [value]="'No'">No</mat-option>
    </mat-select>
  </mat-form-field>
</div>

• 添加自定义CSS（需写在全局样式文件如styles.css中）：

.mat-option:hover:not(.mat-option-disabled) {
  background-color: pink !important;
}

3. 自定义下拉组件（纯Angular实现） #

若不想引入第三方库，可自行实现自定义下拉：

• HTML结构：

<div class="form-group">
  <label>Support Hierarchy</label>
  <div class="custom-select" (click)="toggleDropdown()">
    <div class="selected-text">{{ selectedValue || 'Select an option' }}</div>
    <ul class="option-list" *ngIf="isDropdownOpen">
      <li class="option-item"
          *ngFor="let opt of options"
          (click)="selectOption(opt)"
          (mouseenter)="hoveredValue = opt.value"
          [class.hovered]="hoveredValue === opt.value">
        {{ opt.label }}
      </li>
    </ul>
  </div>
</div>

• TS逻辑：

// component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-dropdown',
  templateUrl: './custom-dropdown.component.html',
  styleUrls: ['./custom-dropdown.component.css']
})
export class CustomDropdownComponent {
  options = [
    { value: 'Yes', label: 'Yes' },
    { value: 'No', label: 'No' }
  ];
  selectedValue: string | null = null;
  isDropdownOpen = false;
  hoveredValue: string | null = null;

  toggleDropdown() {
    this.isDropdownOpen = !this.isDropdownOpen;
  }

  selectOption(opt: { value: string; label: string }) {
    this.selectedValue = opt.value;
    this.isDropdownOpen = false;
    // 可通过@Output()将选中值传递给父组件
  }
}

• CSS样式：

.custom-select {
  position: relative;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  width: fit-content;
}

.option-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  z-index: 100;
}

.option-item {
  padding: 8px 12px;
  cursor: pointer;
}

.option-item.hovered {
  background-color: pink;
}

4. 临时兼容hack（仅部分浏览器有效） #

仅Firefox支持通过特定伪元素修改，兼容性极差，不推荐在生产环境使用：

@-moz-document url-prefix() {
  option:hover {
    background-color: pink !important;
  }
}

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