Search results

Customize RadioButton Appearance in Angular RadioButton component

28 Jul 2021 / 1 minute to read

You can customize the appearance of the RadioButton 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 RadioButton is customized through the custom classes to create primary, success, warning, danger, and info type of radio button.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    // To customize RadioButton appearance
    template: `<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>`
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        RadioButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
.e-radio-wrap {
  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
}

li {
  list-style: none;
  margin: 25px auto;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}