Create A Custom Advanced Checkbox - Slider Checkbox With HTML And CSS

Learn how you can create a switch checkbox or rather say a slider checkbox by only using HTML and CSS.

Last Update: Dec 03, 2021

Create A Custom Advanced Checkbox - Slider Checkbox With HTML And CSS

In this tutorial we are going to create a custom advanced checkbox. If you want to have a toggle checkbox or rather say a slider checkbox, then you have just landed on the right tutorial.

We will be using only HTML & CSS as this doesn't require much. Without any further ado, let's get to it.

index.html

<!--
    Author: Mr Parallel
    Tutorial: Custom CheckBox
    Contact: stetcha@panthera-clan.co.za
-->

<style>
    body{
        padding-top: 180px;
        text-align: center;
    }
    .input-checkbox{
        display: none;
    }
    #advanced-checkbox{
        position: relative;
        display: inline-block;
        width: 275px;
        height: 55px;
        margin-bottom: 25px;
    }
    .slider{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      cursor: pointer;
      background-color: #bc2612;
      border-radius: 25px;
      font-size: 26px;
      text-align: center;
    }
    .slider::before {
      content: "";
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #eee;
      border-radius: 25px;
    }
    .slider::after{
        position: absolute;
        height: 100%;
        width: 50%;
        content: 'Offline';
        left: 50%;
        top: 7px;
    }
    .slider, .slider::before {
        transition: all 0.2s;
     }

    .input-checkbox:checked + .slider {
        border: 2px solid #258805;
        background-color: #55aa7f;
    }

    .input-checkbox:checked + .slider::before {
        left: 50%;
    }
    .input-checkbox:checked + .slider::after {
      content: "Online";
      left: 0;
    }
</style>

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Advanced CheckBox with HTML & CSS</title>
    </head>

    <body>
        
        <h1>Choose Status</h1>
        <label id="advanced-checkbox">
            <input type="checkbox" class='input-checkbox'/>
            <span class="slider"></span>
        </label>
        
    </body>

</html>

If the checkbox isn't checked then the output will be the first picture or rather say the cover image of this tutorial.

When checkbox is checked, this is the output:

And well that's it, that's how you can create a custom advanced checkbox with just only HTML & CSS.

Source Code: Download Source Code

Thank you for visiting this site.

Regards