Search results

Customize RadioButton Appearance in ASP.NET Core RadioButton control

04 Aug 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.

tagHelper
custom.cs
Copied to clipboard
<ul>
    <li>
        <ejs-radiobutton id="radio1" label="Primary" name="custom" cssClass="e-primary"></ejs-radiobutton>
    </li>
    <li>
        <ejs-radiobutton id="radio2" label="Success" name="custom" cssClass="e-success"></ejs-radiobutton>
    </li>
    <li>
        <ejs-radiobutton id="radio3" label="Info" name="custom" checked="true" cssClass="e-info"></ejs-radiobutton>
    </li>
    <li>
        <ejs-radiobutton id="radio4" label="Warning" name="custom" cssClass="e-warning"></ejs-radiobutton>
    </li>
    <li>
        <ejs-radiobutton id="radio5" label="Danger" name="custom" cssClass="e-danger"></ejs-radiobutton>
    </li>
</ul>

<style>

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

    li {
        list-style: none;
    }

    .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
    }
    
</style>
Copied to clipboard
public ActionResult Custom()
{
    return View();
}