Need custom and simple radio checkbox buttons for your modern design without including large JS or CSS library

Now i am going to describe you how to build own custom radio and checkbox buttons for modern look… Its too much simple to integrate according to your design and functions but have one question on your mind why we use this ? today’s in market many library’s available… : Yes correct but you need just radia buttons or checkbox for your design and  that library will included all other no need controls and it will be 120KB + CSS  or more… so its impact to website loading and also thats library you need to be change css as per ur design so now you say why not this !

Below are demo and download link for you that will helpful to integrate and more understanding.

View Demo  |  Download Demo

This is a simple for you and also mobile touch enable and each modern browsers supported… Now i m going to describe how to do and integrate to your own site….

Below is a html file for demo page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="cinput.css">

                        <h3>Custom Radio buttons</h3>

                        <input type="radio" name="gender" class="cchkbox" value="Mme" id="r1">
                        <label for="r1">option 1</label>

                        <input type="radio" name="gender" class="cchkbox" value="Mme" id="r2">
                        <label for="r2">option 2</label>

                        <input type="radio" name="gender" class="cchkbox" value="Mme"  disabled="disabled" checked="checked" id="q3">
                        <label for="q3"> option disable</label>
                    

                        <h3>Custom checkbox</h3>
                        <input type="checkbox" name="check1" class="cchkbox" value="Mme" id="c1">
                        <label for="c1">checkbox 1</label>

                        <input type="checkbox" name="check2" class="cchkbox" value="Mme" id="c2">
                        <label for="c2">checkbox 2</label>

                        <input type="checkbox" name="check3" class="cchkbox" disabled="disabled" value="Mme"  id="c3">
                        <label for="c3">checkbox disable</label>

                    
<script src="cscript.js"></script>

After one we need to be add css for custom radio and checkbox:

/** default stylesheet for custom radio buttons ***/
input.cchkbox {
    z-index: -1;
    opacity: 0;
    position: absolute;
    text-indent: -1000px;
    width: 0px;
    height: 0px;
}
.custom-chk-input {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    position: absolute;
    top: 0px;
    left: -20px;
    border-radius: 90px;
    background-size: 100%;
    background-position: center center;
    box-sizing: border-box;
}
label.rel-label{
    margin-left: 25px;
    position: relative;
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}
label.c-disable{
    opacity: 0.5;
}
/* for checkbox**/
.custom-chk-input.checkbox.selected {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEIxOTJDNUM0OENBMTFFNjlDMTFGMzIxMENGNkMxODMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEIxOTJDNUQ0OENBMTFFNjlDMTFGMzIxMENGNkMxODMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQjE5MkM1QTQ4Q0ExMUU2OUMxMUYzMjEwQ0Y2QzE4MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQjE5MkM1QjQ4Q0ExMUU2OUMxMUYzMjEwQ0Y2QzE4MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu2PJVEAAAL0SURBVHjalFTdT5JhFD/vw4vAiwgiKILfAtqby+YHMd00Ltxqo7YabbXq1rppq7ZWF67WlrV10R9AW3OttS60xuIuF655oSxbKpIpmehABcQPFFDgpeelIFxpdG6ePWfn+Z3fOc/vHMJw7xWkLZlMsgdVIOQZ9ZpSQ2ttqU4lzVfzuCR4VkMux2LAPjS1aAuEItYEw4QRQWTeEmmgBJMECcXraqtTdV/upE0lEiFw0O9A1hicKLwTg9ejs/2DE/Nmt3/zHSIQsHic6uOmVIBMJLhw3dj88GIH3SkS5EF2tkxW7MsjOdBYVUzrNMrmcbd/bTUUdbCxCBcEPJLTdfuMrqfzcDkNORoumb5/rr1HUSjsYomgWJyh9Fpld1N1Sc4gaSuTiegTR6u6MSMKCflc49ljWhPJQTk9jicY2IrGMneTvs5UJOIbUVO1wlAhE+UEshNPgHlwHB5b7BkfJgJ6rcqANMpCnVjI+zdILAHPh6bg09wKnG+vz/jZRh+pkOlImYivzv6hGe8aUDwSyop+s9zFTJ5YP4I3uAV3TW1QIS/Yk6RYIlSjGK452xYCm9A7MALffRupezQWhz7MxBMMwQ1jyx8gqUSYLVpZD7uywTroMtAqJfDozQhMe1bh2ftJsM8uwa3TrVBTIv5r2d5gyIUm3H57cCuScbKCu3ayGRori+HOiw+ARQc3T7VApVy8b/9GXct20ukJ2BwLgavyBiqjZlYKV7oaQUzxoKVWAfUq6b4geEzg87zPhrCwrfg3+iM78T0BLNilDvpAENawHPrx/FkRB6GwO7Bp7htyOJnk/ynbYnc5x74tmwkgwqmhxcM4N+MNroUiu4dqFBI5xeMeCODfCMPAyFfny+EvD7ajMQvCWyIF9HMXgWNywT87PO0RiAV5NEki4HM5kB4dVkv+zQhMLa7CU1zO27G5XvzblnRfiezF9msvUXjBGTVKqaGhvEgnzReoBXkk+Da2XbNL6/Zxt8/GMEkrThDOfvdDgAEA61Qpp4J5r5oAAAAASUVORK5CYII=");
}
.custom-chk-input.checkbox{

    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjhFQTJGNTI0OENBMTFFNkE5MEVCOTkzMTg5OTM2NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjhFQTJGNTM0OENBMTFFNkE5MEVCOTkzMTg5OTM2NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyOEVBMkY1MDQ4Q0ExMUU2QTkwRUI5OTMxODk5MzY1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyOEVBMkY1MTQ4Q0ExMUU2QTkwRUI5OTMxODk5MzY1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvPAtXgAAAJCSURBVHjaYnSsX8EAA////wdRXHzc7D4WqpKOpsqSZtJCPCrsrCwMT99+vnPl8ZtTB64+3v/m8/ctf//9+8bEyAjXywgz6O+//wwCXOyuVurSabH2WiHiAtwMzEwIhSDwD2jRt5+/GdadvL1mz6UHsx6+/rSbiZGJAWQes6JDCFiBCC9nZIGPcVu0nZY9LycbA7JtcFuBYmwszAz6CmJaZqpSxhcfvn7/9vOPKyC1TEAPMbCzMLuWB5rV2GvLajEQCYBe1moMta6REOR2BTmE6feff1wWalJpRoriRBsCAzIivFoeBgppQBdxMXFzsPoEmauFsDAzMZADQizUQ4R5OXyYjBQlHOVEeBnIBUCHMFioSTsyqUoJmvFzs5NtECig9eREzJhEeDlUsMUQKUBMgFuF6ffffwyUgl+//zIwvfzw7Q6lhj179/kO06WHr0+9+/KdIoNO3nlxiuna0zf7rzx6A07d5ABgNmG48ODVfiZgwt6y6MDVNd9//iHLoFl7Lq4B5r8tTMxMTN8evvk0a8GBK9f+keiojafuXDt798UsRgbGb+BMC8yM9249e/f+8/dfmkoSAqJc7Kx4DXj98RvD2hM3ry07cr3l64/fG5mApQTYIEhZxHDl8qPXt4/ceMrJz8mmxcLCxMDByswAyzq//vxleP3pO8PVx28ZZgO9s/nsvVZgbG+EpUFG5IINWi5xAQs4H1UpIUcdWWEzIR5OFU42FoZXH7/euf38w6mLD1/t//fv/xagBd+Q9QEEGACvZeRTyn9qwgAAAABJRU5ErkJggg==");
}
/** for radio button **/
.custom-chk-input.radio.selected {
    background: #86a9bf;
    border: 4px solid #d5dbe2;
}
.custom-chk-input.radio {
    background: #fff;
    border: 1px solid #86a9bf;
}

All done just need to add small custom script for checkbox and radio buttons:

custom_redio();
function custom_redio()
{
    var checkBox = $('.cchkbox');
                                        
    $(checkBox).each(function(){

        var type=$(this).attr("type");
        if(type=='checkbox' || type=='radio')
        {
                                                             
            if($(this).is(":disabled"))
                $("label[for='"+$(this).attr("id")+"']").addClass("c-disable");
                                                                    
            $("label[for='"+$(this).attr("id")+"']").prepend("<span class='custom-chk-input "+type+"' data-name='"+$(this).attr("name")+"'></span>").addClass('rel-label');
                                                                    
            if($(this).is(':checked')){
                $("label[for='"+$(this).attr("id")+"'] .custom-chk-input").addClass("selected");
            }
        }
    });

    $(checkBox).change(function(){

        $(".custom-chk-input.selected[data-name='"+$(this).attr("name")+"']").removeClass("selected");

        if($(this).is(":disabled"))
            $("label[for='"+$(this).attr("id")+"']").addClass("c-disable");

        if($(this).is(':checked'))
            $("label[for='"+$(this).attr("id")+"'] .custom-chk-input").toggleClass("selected");
                                    
                                                                
    });
}

Now ready to use you need to add just .cchkbox class for your input radio or checkbox and not this is need to be assign label with appropriate input like use id for one box and add one label and set that id as in for atribbute ..

Let me know any confusion or anything you want to do new … 🙂

thanks