Блог

Я использую выбор углового коврика, я хочу удалить активный/выбранный цвет фона при наведении курсора на различные параметры и добавить цвет фона при наведении, аналогичный обычному тегу выбора. Я использовал пользовательское положение наложения cdk в соответствии с требованиями. Вот демонстрационный код как (Используйте первое поле выбора для тестирования) https://stackblitz.com/edit/angular-mat-select-example-uiuuwf?file=src/styles.scss

app.component.html

 <mat-toolbar color="primary">
  Angular Material - mat-select examples
</mat-toolbar>

<div style="padding: 20px;">

  <h1>Model Forms</h1>
  
  <div style="padding: 0 0 20px 20px">
  
    <h3>Value string</h3>
    
    <mat-form-field>
      <mat-select name="countryString" [(value)]="selectedCountry" placeholder="Country">
        <mat-option [value]="'GB'">Great Britain</mat-option>
        <mat-option [value]="'US'">United States</mat-option>
        <mat-option [value]="'CA'">Canada</mat-option>
      </mat-select>
    </mat-form-field>
    
    amp;nbsp;amp;nbsp;
    Selected = {{selectedCountry}}
    
  </div>
  
  <div style="padding: 20px">
  
    <h3>Value variable</h3>
    
    <mat-form-field>
      <mat-select name="countryVaraible" [(value)]="selectedCountry" placeholder="Country">
        <mat-option *ngFor="let country of countries" [value]="country.short">
          {{country.full}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    
    amp;nbsp;amp;nbsp;
    Selected = {{selectedCountry}}
    
  </div>
  
  
  
  <h1>Reactive Forms</h1>
    
  <div style="padding: 0 0 20px 20px">
  
    <h3>Value string</h3>
    
    <mat-form-field>
      <mat-select name="countryReactiveString" [formControl]="selectedCountryControl" placeholder="Country">
        <mat-option [value]="'GB'">Great Britain</mat-option>
        <mat-option [value]="'US'">United States</mat-option>
        <mat-option [value]="'CA'">Canada</mat-option>
      </mat-select>
    </mat-form-field>
    
    amp;nbsp;amp;nbsp;
    Selected = {{selectedCountryControl.value}}
    
  </div>
  
  <div style="padding: 20px">
  
    <h3>Value variable</h3>
    
    <mat-form-field>
      <mat-select name="countryReactiveVaraible" [formControl]="selectedCountryControl" placeholder="Country">
        <mat-option *ngFor="let country of countries" [value]="country.short">
          {{country.full}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    
    amp;nbsp;amp;nbsp;
    Selected = {{selectedCountryControl.value}}
  </div>

</div>
 

стиль.scss

 @import 'theme.scss';

html,
body {
  margin: 0;
  height: 100%;
}

my-app {
  display: block;
  height: 100vh;
}

.container {
  padding: 24px;
  box-sizing: border-box;
}

.mat-checkbox-label {
  text-transform: capitalize;
}
.cdk-overlay-container .cdk-overlay-pane {
  margin-top: 10rem;
}
 

Добавьте в styles.scss файл следующие правила.

Добавление дополнительного класса custom_hover для сохранения оригинальных стилей.

стили.scss

 .mat-select-panel .custom_hover.mat-option.mat-selected:not(.mat-option-multiple) {
  background: #fff;
  color: rgba(0,0,0,.87); // If you want to change the blue font color.
}

.mat-select-panel .custom_hover.mat-option.mat-selected:not(.mat-option-multiple):hover {
  background: rgba(0, 0, 0, 0.04);
}
 

app.component.html

 <mat-form-field>
  <mat-select name="countryString" [(value)]="selectedCountry" placeholder="Country">
    <mat-option class="custom_hover" [value]="'GB'">Great Britain</mat-option>
    <mat-option class="custom_hover" [value]="'US'">United States</mat-option>
    <mat-option class="custom_hover" [value]="'CA'">Canada</mat-option>
  </mat-select>
</mat-form-field>
 

Рабочий Стекблитц для справки