如何在Angular 18中修改mat-select的悬停下划线颜色？

要让鼠标悬停在mat-select组件上时，下划线变为白色，你需要修改CSS，结合hover伪类和目标元素选择器：

.mat-form-field:hover .mdc-line-ripple::after {
  transform: scaleX(1) !important;
  opacity: 1 !important;
  background-color: white !important;
}

完整代码示例 #

HTML代码：

<h4>Basic native select</h4>
<mat-toolbar class="header">
  <mat-form-field style="padding-top:20px">
    <mat-label style="color:white">Choose an option</mat-label>
    <mat-select>
      <mat-option value="option1">Option 1</mat-option>
    </mat-select>
  </mat-form-field>
</mat-toolbar>

CSS代码：

.mat-form-field:hover .mdc-line-ripple::after {
  transform: scaleX(1) !important;
  opacity: 1 !important;
  background-color: white !important;
}

关键说明 #

• 通过.mat-form-field:hover定位到悬停状态的表单容器，确保样式仅在鼠标悬停时生效
• 给mdc-line-ripple::after设置background-color: white，直接修改下划线颜色
• 保留原有的transform和opacity属性，维持下划线的展开显示状态

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