Home > DeveloperSection > Blogs > Custom Checkbox using CSS

Custom Checkbox using CSS


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 3011  View(s)
Rate this:

Custom Checkbox using CSS

In this blog, I have described how to create custom checkbox using css only or pure css.  You can create webpage more attractive using this stylish checkbox. Most beautiful point of this custom checkbox is, it supported by all latest browsers version. Because this checkbox made by css only, hence it is light weighted and work fast loaded.  Steps are given below.

Step 1: CSS of custom checkbox.

<style type="text/css">

        /*  size(width and height) of  main checkbox */

.ckbox

        {

            width: 25px;

            height: 25px;

        }

        /*  position of main custome checkbox   */

.custom-checkbox

        {

            position: relative;

            display: inline-block;

        }

        /*  craete custom checkbox in place of actual checkbox */

.custom-checkbox > .box

        {

            position: relative;

            display: block;

            width: 25px;

            height: 25px; /* set custom checkbox background color    */

            background-color: #E5E5E5;

            padding: 0px;

            margin: 0px;

        }

        /*  check sign position, color, width and height    */

.custom-checkbox > .box > .tick

        {

            position: absolute;

            left: 4px;

            top: 7px;

            width: 14px;

            height: 6px;

       /*  set check sign width */

            border-bottom: 4px solid #000;

            border-left: 4px solid #000;

            -webkit-transform: rotate(-45deg);

            -moz-transform: rotate(-45deg);

            -o-transform: rotate(-45deg);

            -ms-transform: rotate(-45deg);

            transform: rotate(-45deg);

            display: none;

        }

        /*  input checked unchecked action    */

.custom-checkbox > input:checked + .box > .tick

        {

            display: block;

        }

        /*  input checked unchecked position and width and height    */

.custom-checkbox > input

        {

            position: absolute;

            outline: none;

            left: 0;

            top: 0;

            padding: 0;

            width: 25px;

            height: 25px;

            border: none;

            margin: 0;

            opacity: 0;

            z-index: 1;

        }

    </style>

Step 2:  Create custom checkbox as below using above css class

<span class="custom-checkbox">

        <input type="checkbox" id="chkPermission" class="ckbox" />

            <span class="box">

                <span class="tick"></span>

            </span>

    </span>

Figure:

Step 3: If you want to checkbox with description then use as below line of code

<span class="custom-checkbox">

        <input type="checkbox" id="chkPermission" class="ckbox" />

        <span class="box"><span class="tick"></span></span></span>

<span style="vertical-align: super;">Permission</span>

Figure:


Step 4: If you want to checked checkbox on checkbox’s description click then line of code as below

<span class="custom-checkbox">

        <input type="checkbox" id="chkPermission" class="ckbox" />

            <span class="box">

                <span class="tick"></span>

            </span>

    </span>

    <label for="chkPermission" style="vertical-align: super;">

        Permission

    </label>

Figure:


Don't want to miss updates? Please click the below button!

Follow MindStick