---
title: "Custome Checkbox css not working with @html.checkbox() in  mvc 4"  
description: "Custome Checkbox css not working with @html.checkbox() in  mvc 4"  
author: "Anonymous User"  
published: 2013-03-01  
updated: 2013-03-02  
canonical: https://www.mindstick.com/forum/615/custome-checkbox-css-not-working-with-html-checkbox-in-mvc-4  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 2 minutes  

---

# Custome Checkbox css not working with @html.checkbox() in  mvc 4

Hi Expert!

I'm working on [asp.net MVC](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) 4 project. I want to create [custom checkbox](https://www.mindstick.com/blog/455/custom-checkbox-using-css) with **@html.checkbox()** [control](https://www.mindstick.com/blog/197/asp-dot-net-repeater-control) on my web project. \
any suggestion will be appreciated.

my css code

.ckbox\
{\
width: 25px;\
height: 25px;\
}\
.custom-checkbox\
{\
position: [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css);\
display: inline-block;\
}

.custom-checkbox > .box\
{\
position: relative;\
display: block;\
width: 25px;\
height: 25px;\
[background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp)-color: #FFF;\
padding: 0px;\
margin: 0px;\
}

.custom-checkbox > .box > .tick\
{\
position: [absolute](https://www.mindstick.com/interview/1159/what-is-absolute-and-sliding-expiration-in-dot-net);\
left: 4px;\
top: 7px;\
width: 14px;\
height: 6px;\
border-bottom: 4px solid #000;\
border-left: 4px solid #000;\
-webkit-[transform](https://www.mindstick.com/interview/511/what-are-the-steps-to-transform-xml-into-html-using-xsl): 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](https://www.mindstick.com/forum/12951/how-to-fix-bootstrap-tab-vertical-with-text)-align: super;">\
Users\
</label>

Thanks in advance

## Replies

### Reply by AVADHESH PATEL

Hi Ankita!

You can create html [checkbox](https://www.mindstick.com/articles/291/how-should-use-checkbox-control-in-vb-dot-net) 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>
```


---

Original Source: https://www.mindstick.com/forum/615/custome-checkbox-css-not-working-with-html-checkbox-in-mvc-4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.