Question

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

我试图在配置中这样做

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

但我会在css中预先做到这一点，我想为我的md-radio-button设置确切的颜色

Answer 1

此代码将更改单选按钮的颜色：

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 2

 <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 3

检查Declarative Syntax 你可以像这样设置

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

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

Answer 4

接受的答案似乎不再适用或不适用于Chrome。

斯韦特兰娜的答案有效，但是没有一个单一的单选按钮，需要一个额外的！重要的。要用类设置单个单选按钮的颜色，请执行以下操作：

.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

您可以选择单选按钮，如下所示：在模板中，您可以提供类名

<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类的代码。

我在谷歌浏览器上使用并测试它。

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;

}

角度材料改变了md-radio-button颜色

6 个答案: