html-Angular mat-选择如何在不同选项悬停时移除活动背景-堆栈溢出

顺晟科技

2022-10-19 12:55:56

202

我正在使用角垫选择，我希望删除活动/选定的背景色时，我在不同的选项悬停，并添加背景色在悬停选项类似于正常的选择标签。我已经使用自定义cdk覆盖位置的要求。下面的演示代码为（使用第一个选择框进行测试）https://stackblitz.com/edit/angulg-mat-select-example-uiuuwf？file=src%2fstyles.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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&nbsp;
    Selected = {{selectedCountryControl.value}}
  </div>

</div>

style.scss

<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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&nbsp;
    Selected = {{selectedCountryControl.value}}
  </div>

</div>

顺晟科技：

将以下规则添加到文件中。

添加额外的类以保留原始样式。

styles.scss

<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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&nbsp;
    Selected = {{selectedCountryControl.value}}
  </div>

</div>

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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&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>
    
    &nbsp;&nbsp;
    Selected = {{selectedCountryControl.value}}
  </div>

</div>

工作stackblitz供参考

上一篇：HTML-使用动态（javascri 下一篇：HTML-有没有一种方法可以使<ma

网站建设

Html

html-Angular mat-选择如何在不同选项悬停时移除活动背景-堆栈溢出

app.component.html

style.scss