---
title: "Custom Checkbox in ASP.Net MVC 4 Razor"  
description: "Here I have described how to create custom checkbox in ASP.Net MVC 4. This custom checkbox support all browsers (Internet Explorer, Mozilla, Chrome, O"  
author: "AVADHESH PATEL"  
published: 2012-12-04  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/399/custom-checkbox-in-asp-dot-net-mvc-4-razor  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 2 minutes  

---

# Custom Checkbox in ASP.Net MVC 4 Razor

Here I have described how to create [custom checkbox](https://www.mindstick.com/blog/455/custom-checkbox-using-css) in [ASP.Net MVC](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) 4. This custom checkbox support all browsers ([Internet](https://www.mindstick.com/articles/44650/what-should-you-do-during-an-internet-outage) [Explorer](https://www.mindstick.com/forum/34658/want-to-developed-windows-explorer-without-using-telerik), Mozilla, Chrome, Opera and Safari) with [latest updates](https://answers.mindstick.com/qa/115306/what-are-the-latest-updates-on-the-global-efforts-to-regulate-artificial-intelligence). Stapes are given below\

Step 1: Create [controller](https://www.mindstick.com/blog/273/passing-values-from-controller-to-view-in-asp-dot-net-mvc) (e.g. HomeController) and view (e.g. Index) in ASP.NET MVC 4.

Step 2: [Copy and Paste](https://answers.mindstick.com/qa/95127/how-do-you-copy-and-paste-the-contents-of-a-pdf) below code on [View page](https://www.mindstick.com/forum/156903/how-to-send-data-from-controller-to-view-page-in-asp-dot-net-mvc)

```
<style type="text/css">    .ez-hide    {        opacity: 0;        filter: alpha(opacity=0);    }    .ez-checkbox    {        background: transparent url('../images/checkbox1.png') 0 1px no-repeat;        display: inline-block;        border: 1px solid black;        width: 23PX;        height: 23px;    }   .ez-checked    {        background-position: 0 -28px;    }</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">    (function ($) {        $.fn.ezMark = function (options) {            options = options || {};            var defaultOpt = {                checkboxCls: options.checkboxCls || 'ez-checkbox',                checkedCls: options.checkedCls || 'ez-checked', selectedCls: options.selectedCls || 'ez-selected',                hideCls: 'ez-hide'            };            return this.each(function () {                var $this = $(this);                var wrapTag = $this.attr('type') == 'checkbox' ? '<div class="' + defaultOpt.checkboxCls + '">' : '<div class="' + defaultOpt.radioCls + '">';                // for checkbox                if ($this.attr('type') == 'checkbox') {                    $this.addClass(defaultOpt.hideCls).wrap(wrapTag).change(function () {                        if ($(this).is(':checked')) {                            $(this).parent().addClass(defaultOpt.checkedCls);                        }                        else { $(this).parent().removeClass(defaultOpt.checkedCls); }                    });                    if ($this.is(':checked')) {                        $this.parent().addClass(defaultOpt.checkedCls);                    }                }            });        }    })(jQuery);</script><script type="text/javascript">    $(function () {        $('.defaultP input').ezMark();        $('.customP input[type="checkbox"]').ezMark({ checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green' })    });     </script><table>    <tr>        <td>            <span class="defaultP">                <input type="checkbox" name="avadhesh" value="1" id="chkid" checked="checked" style="width: 23px;                    height: 23px; margin-left: -1px; margin-top: -1px;" /></span>        </td>       <td>           <span>Temperature</span>        </td>    </tr></table>
```

Step3: create a folder (e.g. Images) in project Solution Explorer paste below image within this folder. For copy below image, right click on image and save in your local drive.

![Custom Checkbox in ASP.Net MVC 4 Razor](https://www.mindstick.com/blogs/d7750ae0-8f81-4c81-923c-e3896a6a2241/images/09bf0b23-66dc-4230-a2dc-a176db552565.png)

Step4: change image path in CSS tag. \

\
![Custom Checkbox in ASP.Net MVC 4 Razor](https://www.mindstick.com/blogs/d7750ae0-8f81-4c81-923c-e3896a6a2241/images/dfcd74cc-f7cf-46d8-a09b-ca2c85a88fdb.png)

I hope you enjoy this blog.

---

Original Source: https://www.mindstick.com/blog/399/custom-checkbox-in-asp-dot-net-mvc-4-razor

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