Live Demo: Custom Radio Buttons with CSS and jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Radio Buttons with CSS and jQuery</title>
<style>
	.custom-radio{
		width: 16px;
		height: 16px;
		display: inline-block;
		position: relative;
		z-index: 1;
		top: 3px;
		background: url("/examples/images/radio.png") no-repeat;
	}
	.custom-radio:hover{            
		background: url("/examples/images/radio-hover.png") no-repeat;
	}
	.custom-radio.selected{
		background: url("/examples/images/radio-selected.png") no-repeat;
	}
	.custom-radio input[type="radio"]{
		margin: 1px;
		position: absolute;
		z-index: 2;            
		cursor: pointer;
		outline: none;
		opacity: 0;
	}
    
    /* Let's Beautify Our Form */
    form{
        margin: 20px;
    }
    label{
        display: block;
        padding: 2px 0;
    }
    input[type="submit"]{
        float: left;
        background: #f2f2f2;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        margin-top: 20px;
        padding: 4px 10px;
        cursor: pointer;
        outline: none;
    }
	input[type="submit"]:hover{
        color: #fff;
        border-color: #1b7aa9;
        background-color: #239fdb;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function customRadio(radioName){
        var radioButton = $('input[name="'+ radioName +'"]');
        $(radioButton).each(function(){
            $(this).wrap( "<span class='custom-radio'></span>" );
            if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
        });
        $(radioButton).click(function(){
            if($(this).is(':checked')){
                $(this).parent().addClass("selected");
            }
            $(radioButton).not(this).each(function(){
                $(this).parent().removeClass("selected");
            });
        });
    }
    $(document).ready(function (){
        customRadio("browser");
        customRadio("search-engine");            
        customRadio("confirm");
    })
</script>
</head>
<body>
    <form action="/examples/faq/radio-action.php" method="post">
        <h3>What Is Your Favorite Web Browser</h3>
        <label><input type="radio" name="browser" value="firefox"> Firefox</label>
        <label><input type="radio" name="browser" value="chrome"> Chrome</label>
        <label><input type="radio" name="browser" value="safari"> Safari</label>  
        
        <h3>What Is Your Favorite Search Engine</h3>
        <label><input type="radio" name="search-engine" value="google"> Google</label>
        <label><input type="radio" name="search-engine" value="yahoo"> Yahoo</label>
        <label><input type="radio" name="search-engine" value="bing"> Bing</label>      
        
        <h3>Are You Sure?</h3>
        <label><input type="radio" name="confirm" checked="checked" value="yes"> Yes</label>
        <label><input type="radio" name="confirm" value="no"> No</label>
        <input type="submit" value="Submit">
    </form>
</body>
</html>