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:
Anonymous User
18-Jun-2019Thanks for the informative post.