Switch, Checkbox, Radio Button

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<h3>You can toggle us <i data-feather="smile"></i></h3>

<h3>You can't toggle us <i data-feather="frown"></i></h3>

</main>

xxxxxxxxxx
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
​
<main class="card">
​
        <h3>You can toggle us <i data-feather="smile"></i></h3>
​
        <div class="input-row">
            <div class="toggle">
                <input type="checkbox">
                <span class="slider"></span>
                <span class="label">Off</span>
            </div>
​
            <div class="checkbox">
                <input type="checkbox"">
                <span class="check"><i class="checked-icon" data-feather="check"></i></span>
                <span class="label">Off</span>
            </div>
​
            <div class="radio">
                <input type="radio">
                <span class="rad"><div class="rad-icon"></div></span>
                <span class="label">Off</span>
            </div>
        </div>
​
        <div class="input-row">
            <div class="toggle focus">
                <input type="checkbox">
                <span class="slider focus"></span>
                <span class="label">Off</span>
            </div>
​
            <div class="checkbox focus">
                <input type="checkbox">
                <span class="check"><i class="checked-icon" data-feather="check"></i></span>
                <span class="label">Off</span>
            </div>
​
            <div class="radio focus">
                <input type="radio">
                <span class="rad"><div class="rad-icon"></div></span>

@keyframes eh {
            0% {transform: scale(0%)};
            100% {transform: scale(100%)};
        }

.feather-check { color: white; width: 30px; height: 30px; }
        .checked-icon { display: block; opacity: 0;}
        .rad-icon { opacity: 0; background-color: transparent; border: 2px solid white; height: 20px; width: 20px; border-radius: 50%; margin: 5px auto; display: block; }

* { 
            box-sizing: border-box;
            -moz-box-sizing:border-box;
		    -webkit-box-sizing:border-box;
		    -o-box-sizing:border-box;
            word-wrap: break-word;
        }

body {
            height: 100vh;
            margin: 0;
            padding: 0;
            background-image: linear-gradient(200deg, #ffd75e 0% 51.9%, #4287f5 52% 54.9%, white 55%);
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Poppins', sans-serif;
            font-size: 18px;
        }

.card {
            background-color: white;
            width: 60vw;
            height: 70vh;
            border-radius: 10px;
            box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-flow: column;
            justify-content: space-evenly;
            align-items: center;
            padding: 2% 4%;
        }

h3 .feather { vertical-align: middle; margin-left: 10px;}

.input-row {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 5px;
        }
        
        .checkbox, .radio {
            width: 30px;
            height: 30px;
            position: relative;
            display: block;
        }

.check, .rad {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #e3eefa;
        }
        .check { border-radius: 3px; transition: all 0.4s; }
        .rad {border-radius: 50%; transition: all 0.4s; }

.checkbox.on .check, .radio.on .rad { background-color: #4287f5; }
        .checkbox.on .checked-icon, .radio.on .rad-icon {
            opacity: 1; 
            text-align: center;
            animation-name: eh;
            animation-duration: 0.3s;
        }

.checkbox .checked-icon, .radio .rad-icon { transition: opacity 0.3s ease-out; }

.toggle {
            position: relative;
            width: 60px;
            height: 34px;
            display: inline-block;
        }

.toggle .slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: 0.4s;
            border-radius: 34px;
        }

.toggle .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
        }

.toggle .slider { background-color: #e3eefa; }
        .toggle.on .slider { background-color: #4287f5; }
        .toggle.on .slider:before { transform: translateX(26px); box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2); }

.toggle .label { position: absolute; left: 70px; top: 4px; vertical-align: middle; }
        .checkbox .label, .radio .label { position: absolute; left: 50px; top: 4px; vertical-align: middle; }

input { height: 100%; width: 100%; opacity: 0; position: absolute; z-index: 100; cursor: pointer; vertical-align: middle;}

/* -- DISABLED -- */

.toggle.disabled .slider { background-color: #ededed; }
        .toggle.disabled .slider::before { box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05); }
        .checkbox.disabled .check, .radio.disabled .rad { background-color: #ededed; }

.disabled .label { color: #bababa; }
        .disabled input { pointer-events: none; }

/* -- FOCUS -- */

.toggle.focus .slider, .checkbox.focus .check, .radio.focus .rad { box-shadow: 0px 0px 0px 2px #bababa; transition: all 0.4s; }
        .focus .label { text-shadow: 0px 0px 3px #bababa; transition: all 0.4s; }

xxxxxxxxxx
 
@keyframes eh {
            0% {transform: scale(0%)};
            100% {transform: scale(100%)};
        }
​
        .feather-check { color: white; width: 30px; height: 30px; }
        .checked-icon { display: block; opacity: 0;}
        .rad-icon { opacity: 0; background-color: transparent; border: 2px solid white; height: 20px; width: 20px; border-radius: 50%; margin: 5px auto; display: block; }
​
        * { 
            box-sizing: border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            word-wrap: break-word;
        }
​
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
            background-image: linear-gradient(200deg, #ffd75e 0% 51.9%, #4287f5 52% 54.9%, white 55%);
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Poppins', sans-serif;
            font-size: 18px;
        }
​
        .card {
            background-color: white;
            width: 60vw;
            height: 70vh;
            border-radius: 10px;
            box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-flow: column;
            justify-content: space-evenly;
            align-items: center;
            padding: 2% 4%;
        }
​
        h3 .feather { vertical-align: middle; margin-left: 10px;}

feather.replace();

$(document).ready(function(){
        $('.toggle input[type="checkbox"]').click(function(){
            $(this).parent().toggleClass('on');

if ($(this).parent().hasClass('on')) {
                $(this).parent().children('.label').text('On')
            } else {
                $(this).parent().children('.label').text('Off')
            }
        });

$('.checkbox input[type="checkbox"]').click(function(){
            $(this).parent().toggleClass('on');

$('.radio input[type="radio"]').click(function(){
            $(this).parent().addClass('on');

if ($(this).parent().hasClass('on')) {
                $(this).parent().children('.label').text('On')
            }
        });
        $('input').focusin (function() {
            $(this).parent().addClass('focus');
        });
        $('input').focusout (function() {
            $(this).parent().removeClass('focus');
        });
    });

xxxxxxxxxx
 
  feather.replace();    
​
    $(document).ready(function(){
        $('.toggle input[type="checkbox"]').click(function(){
            $(this).parent().toggleClass('on');
​
            if ($(this).parent().hasClass('on')) {
                $(this).parent().children('.label').text('On')
            } else {
                $(this).parent().children('.label').text('Off')
            }
        });
​
        $('.checkbox input[type="checkbox"]').click(function(){
            $(this).parent().toggleClass('on');
​
            if ($(this).parent().hasClass('on')) {
                $(this).parent().children('.label').text('On')
            } else {
                $(this).parent().children('.label').text('Off')
            }
        });
​
        $('.radio input[type="radio"]').click(function(){
            $(this).parent().addClass('on');
​
            if ($(this).parent().hasClass('on')) {
                $(this).parent().children('.label').text('On')
            }
        });
        $('input').focusin (function() {
            $(this).parent().addClass('focus');
        });
        $('input').focusout (function() {
            $(this).parent().removeClass('focus');
        });
    });

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever