Angular 材料更改 md-radio-button 颜色

Question

有人知道如何更改 angular 材料中的 md-radio-button 颜色吗？

我正尝试在这样的配置中执行此操作

  $mdThemingProvider.theme('default')
        .primaryPalette('orange')
        .accentPalette('orange');

但我会在 css 中预先执行此操作，并且我想为我的 md-radio-button 设置准确的颜色

Answer 1

 <md-radio-group>
    <md-radio-button ng-value="green" class="my-radio">
      button
    </md-radio-button>
  </md-radio-group>

  <style>
      //unchecked
      md-radio-button.my-radio .md-off{
          border-color: blue;
      }
      //checked
      md-radio-button.md-checked.my-radio .md-on{
          background-color: blue;
      }

Answer 2

检查此声明性语法你可以这样设置

 <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>

你也可以设置class="md-accent"和class="md-warn"

Answer 3

此代码将改变您的 radio-button:

的颜色

md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
  background-color: rgb(67, 174, 86);
}
md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off {
  border-color: rgb(67, 174, 86);
}

Answer 4

已接受的答案似乎不再有效或不适用于 chrome。

Svetlana 的回答有效，但不适用于带有 class 的单个单选按钮，并且需要额外的 !important。要使用 class 设置单个单选按钮的颜色，请执行以下操作：

.green-radio .md-on,
.green-radio md-radio-button .md-on {
    background-color: rgb(67, 174, 86);
}

.green-radio .md-off,
.green-radio md-radio-button.md-checked .md-off {
    border-color: rgb(67, 174, 86) !important;
}

Answer 5

您可以select单选按钮如下：在模板中，您可以提供 class 名称

<md-radio-button class="my-class" value="Orange">
    Orange
</md-radio-button>

而在css中你可以进行如下操作

md-radio-button.md-checked.my-class .md-on {
background-color: blue; 
}

md-radio-button.md-checked.my-class .md-off {
border-color: blue;
}

您可以根据自己的喜好使用它。如果你只是想改变按钮的颜色而不是它周围的圆形边框，那么你可以忽略 .md-off class.

的代码

我正在 google chrome.

上使用和测试它

Answer 6

:host ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: #007ad9;
    background-color: #007ad9;
}

:host ::ng-deep .mat-radio-button .mat-accent .mat-radio-checked .cdk-focused .cdk-mouse-focused {
    border-color: green;
    background-color: green;
} 

    enter code here

/* //checked */
mat-radio-button.md-checked.my-radio .md-on{
    background-color: blue !important;
}

:host ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle, .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
    background-color: white;
}

:host ::ng-deep .mat-radio-outer-circle {
    box-sizing: border-box;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    transition:  ease 280ms;
    width: 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    background-color: white;

}

Angular 材料更改 md-radio-button 颜色

Angular materials change md-radio-button color

angular-material