Customize Radio Button appearance in Angular Radio button component

25 Sep 20267 minutes to read

You can customize the appearance of the Angular Radio Button component by using the CSS rules.
Define own CSS rules according to your requirement and assign the class name to the
cssClass property.

The background and border color of the Angular Radio Button is customized through the custom classes to create primary, success, warning, danger, and info type of radio button.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons'




import { Component } from '@angular/core';

@Component({
imports: [
        
        RadioButtonModule
    ],


standalone: true,
    selector: 'app-root',
    // To customize RadioButton appearance
    template: `<div class="e-section-control">
                <ul>
               <!-- Refer the 'e-primary' class details in 'style.css'. -->
               <li><ejs-radiobutton label="Primary" name="custom" cssClass="e-primary"></ejs-radiobutton></li>

               <!-- Refer the 'e-success' class details in 'style.css'. -->
               <li><ejs-radiobutton label="Success" name="custom" cssClass="e-success"></ejs-radiobutton></li>

               <!-- Refer the 'e-info' class details in 'style.css'. -->
               <li><ejs-radiobutton label="Info" name="custom" cssClass="e-info" checked="true"></ejs-radiobutton></li>

               <!-- Refer the 'e-warning' class details in 'style.css'. -->
               <li><ejs-radiobutton label="Warning" name="custom" cssClass="e-warning"></ejs-radiobutton></li>

               <!-- Refer the 'e-danger' class details in 'style.css'. -->
               <li><ejs-radiobutton label="Danger" name="custom" cssClass="e-danger"></ejs-radiobutton></li>

               </ul>
               </div>`
})

export class AppComponent { }

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';

.e-section-control {
	margin-top: 150px;
}

#container {
  visibility: hidden;
}

#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}

li {
list-style: none;
}

.e-radio-wrapper {
margin-top: 18px;
}

.e-success .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #689f38;
border-color: #689f38;
}

.e-success .e-radio:checked:focus + label::after, .e-success .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #449d44;
border-color: #449d44;
}

.e-success .e-radio:checked + label::before {
border-color: #689f38;
}

.e-success .e-radio:checked:focus + label::before, .e-success .e-radio:checked + label:hover::before { /* csslint allow: adjoining-classes */
border-color: #449d44;
}
.e-success .e-radio +label:hover::before {
border-color: #b1afaf
}
.e-info .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #2196f3;
border-color: #2196f3;
}

.e-info .e-radio:checked:focus + label::after, .e-info .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #0b7dda;
border-color: #0b7dda;
}

.e-info .e-radio:checked + label::before {
border-color: #2196f3;
}

.e-info .e-radio:checked:focus + label::before, .e-info .e-radio:checked + label:hover::before {
border-color: #0b7dda;
}

.e-info .e-radio + label:hover::before {
border-color: #b1afaf
}

.e-warning .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #ef6c00;
border-color: #ef6c00;
}

.e-warning .e-radio:checked:focus + label::after, .e-warning .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #cc5c00;
}

.e-radio:checked + .e-warning::before {
border-color: #ef6c00;
}

.e-warning .e-radio:checked:focus + label::before, .e-warning .e-radio:checked + label:hover::before {
border-color: #cc5c00;
}

.e-warning .e-radio + label:hover::before {
border-color: #b1afaf
}

.e-danger .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
background-color: #d84315;
border-color: #d84315;
}
.e-danger .e-radio:checked:focus + label::after, .e-danger .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
background-color: #ba330a;
border-color: #ba330a;
}

.e-danger .e-radio:checked + label::before {
border-color: #d84315;
}

.e-danger .e-radio:checked:focus + label::before, .e-danger .e-radio:checked + label:hover::before {
border-color: #ba330a;
}

.e-danger .e-radio + label:hover::before {
border-color: #b1afaf
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));