Angular 6 Material - Hues and How to Change the Color of Mat Radio Button

Angular 6 Material - Hues and How to change the color of mat radio button

add this css in your style.css/style.scss

Stackblitz

style.css/style.scss

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
  border-color:rgb(66, 134, 244); 
}

.mat-radio-button.mat-accent .mat-radio-inner-circle{
  color:rgb(66, 134, 244);
  background-color:rgb(66, 134, 244) ;
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37,.26);
}

how to change Angular 6 material radio button outer ripple color

Here is solution to completly style mat-radio button

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
        opacity: 0.5 !important;     /*click effect color change*/
        background-color: blue !important;
  }

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
        background-color: blue!important;   /*inner circle color change*/
  }

  ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
       border-color:blue!important; /*outer ring color change*/
  }

Hope is helpful.

Mat Radio Button Color Change in Angular

i searched lot of things ,but finally i got the solution

import { ThemePalette } from '@angular/material/core';     
color: ThemePalette = "warn";
     <mat-radio-button [color]="color" value="2">With Template</mat-radio-button>

Angular materials change md-radio-button color

 <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;
      }

Change the CSS (for example bgcolor) on angular material radio button

I just figured it out.
the following code will both hide the circle of the radio button and changes the color of another element on its selection

::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;}

How to change color of radio button in angular material 2

In case anyone else stumbles across this issue, you can now use the color property on MatRadioButton components. Here is the link to the GitHub issue where I was corrected:

• https://github.com/angular/material2/issues/9439

Angular Material - change color of md-radio-button

You can use this rule for the color of the center of your radio button :

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: rgb(66, 134, 244);
}

This one for the border :

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: rgb(66, 134, 244);
}

And this one for the circle which appears when you click on the radio button :

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color:rgba(66, 134, 244,.26);
}

Here is a working example.

---

Related Topics