It is very easy to style Check-boxes using HTML and CSS3
Below is the code I have used.
CSHTML
HTML Page
CSS3.myCheckbox input {
position: relative;
z-index: -9999;
}
.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
}
.myCheckbox input:checked + span {
background: url("link_to_another_image");
}<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>Razor View
I tried to style the check-box using same code in CS-HTML i.e. razor view, but it doesn't give expected result. So I modified a code little bit and it resulted in exact output I expected.
Below is the code I have used.
CSHTML
<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
CSS3
<style type="text/css">
.display-none{
display:none;
}
.SendMeCopy {
width: 25px;
position: relative;
}
.SendMeCopy label {
cursor: pointer;
position: absolute;
width: 19px;
height: 18px;
top: 0;
left: 0;
background: #24AA98;
border-radius: 5px;
}
.SendMeCopy label.checkbox-label:after {
opacity: 1;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 5px;
left: 5px;
border: 2px solid #fff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.SendMeCopy input[type=checkbox]:checked + label:after {
opacity: 1;
}
</style>
JQuery
<script type="text/javascript">
var first = true;
$("#SendMeCopy").click(function () {
if (first) {
$('#SendMeCopy').attr('checked', true);
$('.SendMeCopy label').toggleClass('checkbox-label');
} else {
$('#SendMeCopy').attr('checked', false);
$('.SendMeCopy label').toggleClass('checkbox-label');
}
first = !first;
});
</script>
0 comments