Hello Guys
This article will guide you To Create Custom Check box by using simple HTML and CSS.
Here is the demo of custom check box
Here is the HTML
<input type="checkbox" id="1"><label for="1"><span></span> One</label>
<input type="checkbox" id="2"><label for="2"><span></span> Two</label>
<input type="checkbox" id="3"><label for="3"><span></span> Three</label>
<input type="checkbox" id="4"><label for="4"><span></span> Four</label>
<input type="checkbox" id="5"><label for="5"><span></span> Five </label>
Here is the CSS
input[type="checkbox"] + label span{
background: url(http://54.160.13.227/demo/img/checkbox.png);
cursor: pointer;
display: inline-block;
height: 25px;
margin-right: 4px;
vertical-align: middle;
width: 25px;
}
input[type="checkbox"]:checked + label span {
background-position: 0 -25px;
}
input[type="checkbox"]{display: none;}
label{margin-right: 10px;}
I hope it will help you.
0 Comment(s)