<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h4>CSS3 Squared Checkbox</h4> <div class="squaredChk"> <input type="checkbox" value="None" id="squaredChk" name="DonationNumber" /> <label for="squaredChk"></label> </div> </div> </div>

input[type=checkbox] { visibility: hidden; } /* SQUARED ONE */ .squaredChk { width: 20px; margin: 20px auto; position: relative; } .squaredChk label { cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; border-radius: 4px; background: #ffffff; border: 2px solid #aaaaaa } .squaredChk label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; border: 1px solid #aaaaaa; border-radius: 2px; width: 17px; height: 16px; background: #aaaaaa; top: 0px; left: 0px; transition: visibility 0s 1s, opacity 1s linear; } .squaredChk label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; transition: visibility 0s .5s, opacity .5s linear; } .squaredChk input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }