Home > DeveloperSection > Forums > Custome Checkbox css not working with @html.checkbox() in mvc 4
Ankita Pandey
Ankita Pandey

Total Post:183

Points:1285
Posted on    March-01-2013 4:38 AM

 ASP.NET MVC ASP.NET MVC 
Ratings:


 1 Reply(s)
 5131  View(s)
Rate this:

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



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    March-02-2013 12:42 AM

Hi Ankita!

You can create html checkbox in place of MVC checkbox control

<span class="custom-checkbox">
                    <input type="checkbox" id="chkPermissionIsUsers@(Model.UserID)" />
                    <span class="box"><span class="tick"></span></span></span>
                    <label class="lblFontStyle" for="chkPermissionIsUsers@(Model.UserID)" style="vertical-align: super;">
                     Users
                   </label>


Don't want to miss updates? Please click the below button!

Follow MindStick