Search results

Customize RadioButton Appearance in Angular RadioButton component

18 Oct 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.

<<<<<<< HEAD

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
>>>>>>> 99b1d2c39b1a3f44a6935429b3cdfc9caba3f2f5



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

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

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

<<<<<<< HEAD
.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 */
=======
.e-radio:checked + .e-success::before {
  border-color: #689f38;
}

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

.e-radio +.e-success:hover::before {
  border-color: #b1afaf
}
.e-radio:checked + .e-info::after { /* csslint allow: adjoining-classes */
>>>>>>> 99b1d2c39b1a3f44a6935429b3cdfc9caba3f2f5
  background-color: #2196f3;
  border-color: #2196f3;
}

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

<<<<<<< HEAD
.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 */
=======
.e-radio:checked + .e-info::before {
  border-color: #2196f3;
}

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

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

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

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

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

<<<<<<< HEAD
.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 */
=======
.e-radio:checked:focus + .e-warning::before, .e-radio:checked + .e-warning:hover::before {
  border-color: #cc5c00;
}

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

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

<<<<<<< HEAD
.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 {
=======
.e-radio:checked + .e-danger::before {
  border-color: #d84315;
}

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

.e-radio + .e-danger:hover::before {
>>>>>>> 99b1d2c39b1a3f44a6935429b3cdfc9caba3f2f5
  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%;
<<<<<<< HEAD
}
=======
}
>>>>>>> 99b1d2c39b1a3f44a6935429b3cdfc9caba3f2f5