blog

Home / DeveloperSection / Blogs / Custom Checkbox using CSS

Custom Checkbox using CSS

AVADHESH PATEL 5952 26-Feb-2013

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:

Custom Checkbox using CSS

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:

Custom Checkbox using CSS

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:

Custom Checkbox using CSS

Updated 18-Sep-2014
Avadhesh Kumar Patel District Project Manager - Aligarh 14 months work experience in Panchayati Raj Department Sector as District Project Manager & 12 months work experience in IT Sector as Software Engineer. :-)

Leave Comment

Comments

Liked By