时间戳

首页 > 解决方案 > 更改角度材质单选按钮上的 CSS（例如 bgcolor）

css - 更改角度材质单选按钮上的 CSS（例如 bgcolor）

问题描述

我有以下来自角度材料的单选按钮，我想在选择它时应用一些 CSS，但是 CSS 不起作用，我不知道为什么，但是:hover我提供的 HTML 和 CSS 都可以正常工作请你帮我解决这个问题？

.things {
  &:focus {
    background-color: red;
  }
  &:hover {
    .thing-name {
      color: #9c27b0;
    }
  }
}
<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
  <span class="thing-details">
      <img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
      <h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
      </span>
</mat-radio-button>

标签： cssangularangular-materialradio-buttonfocus

解决方案

我刚刚想通了。以下代码将隐藏单选按钮的圆圈并更改其选择的另一个元素的颜色

::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
  span .thing-name {
    border: 1px solid #ffffff !important;
    background-color: #28a745 !important;
  }
}

// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
  width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
  border: none;
  width: 0;
}

推荐阅读