Hi Expert!

I'm working on asp.net MVC 4 project. I want to create custom checkbox with @html.checkbox() control on my web project.
any suggestion will be appreciated.

my css code

.ckbox
{
 width: 25px;
 height: 25px;
}
.custom-checkbox
{
 position: relative;
 display: inline-block;
}

.custom-checkbox > .box
{
 position: relative;
 display: block;
 width: 25px;
 height: 25px;
 background-color: #FFF;
 padding: 0px;
 margin: 0px;
}

.custom-checkbox > .box > .tick
{
 position: absolute;
 left: 4px;
 top: 7px;
 width: 14px;
 height: 6px;
 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;
}

.custom-checkbox > input:checked + .box > .tick
{
 display: block;
}

.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;
}

Checkbox code

 <span class="custom-checkbox">
                    @Html.CheckBox("chkPermissionIsUsers@(Model.UserID)", new
           {class="ckbox"
           })  <span class="box"><span class="tick"></span></span></span>
                <label class="lblFontStyle" for="chkPermissionIsUsers@(Model.UserID)" style="vertical-align: super;">
                    Users
                </label>

Thanks in advance