Search results

Customize RadioButton Appearance in JavaScript (ES5) RadioButton control

09 Jun 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 the primary, success, info, warning, and danger type of RadioButton.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
// To customize RadioButton appearance
// Refer the 'e-primary' class details in 'style.css'.
var radiobutton = new ej.buttons.RadioButton({ label: 'Primary', name: 'custom', cssClass: 'e-primary' });
radiobutton.appendTo('#radiobutton1');

// Refer the 'e-success' class details in 'style.css'.
radiobutton = new ej.buttons.RadioButton({ label: 'Success', name: 'custom', cssClass: 'e-success' });
radiobutton.appendTo('#radiobutton2');

// Refer the 'e-info' class details in 'style.css'.
radiobutton = new ej.buttons.RadioButton({ label: 'Info', name: 'custom', cssClass: 'e-info', checked: true });
radiobutton.appendTo('#radiobutton3');

// Refer the 'e-warning' class details in 'style.css'.
radiobutton = new ej.buttons.RadioButton({ label: 'Warning', name: 'custom', cssClass: 'e-warning' });
radiobutton.appendTo('#radiobutton4');

// Refer the 'e-danger' class details in 'style.css'.
radiobutton = new ej.buttons.RadioButton({ label: 'Danger', name: 'custom', cssClass: 'e-danger' });
radiobutton.appendTo('#radiobutton5');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 RadioButton</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <ul>
            <li><input type="radio" id="radiobutton1"></li>
            <li><input type="radio" id="radiobutton2"></li>
            <li><input type="radio" id="radiobutton3"></li>
            <li><input type="radio" id="radiobutton4"></li>
            <li><input type="radio" id="radiobutton5"></li>
        </ul>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#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-radio:checked + .e-success::after { /* csslint allow: adjoining-classes */
  background-color: #689f38;
  border-color: #689f38;
}

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

.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 */
  background-color: #2196f3;
  border-color: #2196f3;
}

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

.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 */
  background-color: #ef6c00;
  border-color: #ef6c00;
}

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

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

.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 */
  background-color: #ba330a;
  border-color: #ba330a;
}

.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 {
  border-color: #b1afaf
}