How to create custom radio buttons in HTML using CSS and jQuery

Use the CSS :checked Pseudo-class with jQuery

If try to style radio buttons directly using CSS properties like background or border it will not work, because most of the form elements are native part of the browsers and does not accept so much visual styling. So we have to find another way of styling radio buttons.

In this tutorial we will create custom radio buttons with the help of CSS and little bit of jQuery. There are many other solutions available like jQuery plug-ins to customize radio buttons but they are unnecessarily complex and not so easy to implement. Here we will simulate the effect of custom radio buttons with the minimum effort that works like a charm and very easy to implement in any project. It is highly compatible across browsers, even works perfectly in Internet Explorer 7.

<form action="action.php" method="post">
    <h3>What Is Your Favorite Web Browser</h3>
    <label><input type="radio" name="browser" checked="checked" value="firefox"> Firefox</label>
    <label><input type="radio" name="browser" value="chrome"> Chrome</label>
    <label><input type="radio" name="browser" value="safari"> Safari</label>
</form>

What we are trying to do with the CSS is hide the default radio buttons with the help of CSS opacity property and show our custom radio buttons in place of them.

Now place the following style rules inside the head section of your HTML document.

<style>
    .custom-radio{
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        z-index: 1;
        top: 3px;
        background: url("radio.png") no-repeat;
    }
    .custom-radio:hover{            
        background: url("radio-hover.png") no-repeat;
    }
    .custom-radio.selected{
        background: url("radio-selected.png") no-repeat;
    }
    .custom-radio input[type="radio"]{
        margin: 1px;
        position: absolute;
        z-index: 2;            
        cursor: pointer;
        outline: none;
        opacity: 0;
        /* CSS hacks for adding opacity in older browsers */
        _noFocusLine: expression(this.hideFocus=true); 
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -khtml-opacity: 0;
        -moz-opacity: 0;
    }
</style>