This is a snippet from my HTML template file, which includes two Angular Material radio buttons. My goal is to disable the focus on the rings quickly after selecting any radio button.
<div id="login-form" class="vh-100 overflow-auto">
<div>
<mat-horizontal-stepper [@.disabled]="true" labelPosition="bottom" [linear]="true" #stepper>
<mat-step>
<div>
<div class="header">
<div class="">
<span>Login to your Account </span>
</div>
</div>
<mat-divider></mat-divider>
<div id="content" class="p-0">
<div>
<legend class="Input-legend">Login Using</legend>
<mat-radio-group aria-label="Select an option" class="radio-btn-container">
<mat-radio-button class="my-2" value="1"
checked="true"><span>Mobile</span></mat-radio-button>
<mat-radio-button class="my-1" value="2"><span>
number</span></mat-radio-button>
</mat-radio-group>
<mat-divider class="mat-div1"></mat-divider>
<div class="continue-btn-holder">
<div class="temp"></div>
<button class="continue-btn">Continue</button>
</div>
<mat-divider class="mat-div2"></mat-divider>
</div>
</div>
</div>
</mat-step>
</mat-horizontal-stepper>
</div>
</div>
This is a portion of my CSS file
/* CSS code for radio buttons */
::ng-deep
.mat-radio-button.mat-accent.mat-radio-checked
.mat-radio-outer-circle {
border-color: #379aaf !important;
}
/* Other CSS styles */
Ts file does not have any specific code
I am looking for a solution where the outer circle's focus gets disabled quickly after selecting any radio button. I have done some research but haven't found a suitable solution yet.