Styling Check-box using CSS3, JQuery in Html page and Razor View

By Unknown - 9:02 PM

It is very easy to style Check-boxes using HTML and CSS3

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");
}
HTML

<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>

  • Share:

You Might Also Like

0 comments