Styling mat-radio-button in Angular Material
Please do not use ViewEncapsulation.None
in your project. In future it will lead to unpredictable behavior. When you change styles inside one component some other components can be changed as well and it will be difficult to find which ones.
If you want to override styles of angular material I suggest creating a separate *.scss in your project with the name like "material-overrides.scss"
where you will put all style changes for different components.
For example, your file can look like this
example-component {
.smallRadio .mat-radio-container{
height: 10px !important;
width: 10px !important;
}
.smallRadio .mat-radio-outer-circle{
height: 10px !important;
width: 10px !important;
}
.smallRadio .mat-radio-inner-circle{
height: 10px !important;
width: 10px !important;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
height: 20px !important;
width: 20px !important;
left: calc(50% - 10px) !important;
top: calc(50% - 10px) !important;
}
}
Please pay attention to !important
in my example. It's also not a good practice. You need to replace it with more precise specifity MDN web docs.
Please also do not forget to add your created material-overrides.scss
file to styles.scss
like that:
@import './material-overrides.scss';
You can also read recommendations for overrides from angular material team - link.
Try this,
Default radius is 20px
we are setting it to 10px
here
:host ::ng-deep .mat-radio-container{
height: 10px;
width: 10px;
}
:host ::ng-deep .mat-radio-outer-circle{
height: 10px;
width: 10px;
}
:host ::ng-deep .mat-radio-inner-circle{
height: 10px;
width: 10px;
}
:host ::ng-deep .mat-radio-button .mat-radio-ripple{
height: 20px; /*double of your required circle radius*/
width: 20px; /*double of your required circle radius*/
left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
}
Without using ::ng-deep
Turn off encapsulation of your component inside which you use the custom radio.
You can do this by
import {Component,ViewEncapsulation} from '@angular/core';
@Component({
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}
Wrap the component you want to style in a custom class.So it wont affect any other radio components.
In the above question its already wrapped with smallRadio
class
.smallRadio .mat-radio-container{
height: 10px;
width: 10px;
}
.smallRadio .mat-radio-outer-circle{
height: 10px;
width: 10px;
}
.smallRadio .mat-radio-inner-circle{
height: 10px;
width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
height: 20px;
width: 20px;
left: calc(50% - 10px);
top: calc(50% - 10px);
}
You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one
Try this: I've got it working with a tick, changing css
:host ::ng-deep .mat-radio-outer-circle{
border-radius:2px;
}
:host ::ng-deep .mat-radio-inner-circle{
border-radius:2px;
background-color: transparent!important;
border-bottom: 4px solid white;
border-right:4px solid white;
height:30px;
width:15px;
margin-top: -8px;
margin-left: 3px;
}
:host ::ng-deep .mat-radio-checked .mat-radio-outer-circle{
background:#ff4081!important;
}
:host ::ng-deep .mat-radio-checked .mat-radio-inner-circle{
transform: rotate(45deg) scale(0.5);
}
:host ::ng-deep .mat-radio-button .mat-radio-ripple{
height: 20px; /*double of your required circle radius*/
width: 20px; /*double of your required circle radius*/
left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
top: calc(50% - 10px); /*'10px'-same as your required circle radius */
}
I think, this should be enough:
.mat-radio-container {
transform: scale(0.85);
}
Choose the number in the scale according to your needs.