title: How to modify hidden autogenerated checkbox of `CheckBoxFor` in MVC4?
body: <p>As many have stated the following <code>Html</code> helper of the <code>MVC</code> generates a hidden checkbox, but i cannot find nowhere how to modify the class of the autogenerated checkbox input. The problem is that somehow the hidden checkbox interferes with the normal one and destroys the appearance of the <code>css</code>. For that reason i need to update the hidden checkbox to include the same css class as the normal checkbox. Is it possible to do that preferably with the MVC?  </p>
  
  <p>Server <code>Html</code> helper:</p>
  
  <pre><code>@Html.CheckBoxFor(m =&gt; m.IsActive, new { @class="px"})
  &lt;span class="lbl"&gt;Active user&lt;/span&gt;
  </code></pre>
  
  <p>Generated html:</p>
  
  <pre><code>&lt;input class="px" data-val="true" data-val-required="This field is required." id="IsActive" name="IsActive" type="checkbox" value="true"&gt;
  &lt;input name="IsActive" type="hidden" value="false"&gt;
  &lt;span class="lbl"&gt;Active user&lt;/span&gt;
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>After request i'm posting what i found from the css because comes from an external library called pixel-admin and as i can see is optimized for ie8.</p>
  
  <pre><code>.gt-ie8 input.px {
    position: absolute !important;
    left: -1000000px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .gt-ie8 input.px + .lbl {
    position: relative;
    padding-left: 1px;
    display: inline-block;
  }
  .gt-ie8 input.px + .lbl:before {
    content: "";
    opacity: 1;
    border: 1px solid #bbb;
    background: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
  }
  .gt-ie8 input.px + .lbl:after {
    display: none;
    position: absolute;
  }
  .gt-ie8 input.px:checked + .lbl:after {
    display: block;
  }
  .gt-ie8 input.px + .lbl:before,
  .gt-ie8 input.px + .lbl:after {
    margin: 2px 3px -3px -20px !important;
  }
  .gt-ie8 input[type="checkbox"].px + .lbl:before {
    border-radius: 2px;
  }
  .gt-ie8 input[type="checkbox"].px + .lbl:after {
    content: "\f00c";
    top: 1px;
    left: 1px;
    width: 13px;
    height: 15px;
    line-height: 15px;
    font-size: 11px;
    font-family: FontAwesome;
    text-align: center;
  }
  .gt-ie8 input[type="radio"].px + .lbl:before {
    border-radius: 999999px;
  }
  .gt-ie8 input[type="radio"].px + .lbl:after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    top: 5px;
    left: 5px;
  }
  .gt-ie8 input.px:disabled,
  .gt-ie8 input.px.disabled,
  .gt-ie8 input.px:disabled + .lbl,
  .gt-ie8 input.px.disabled + .lbl,
  .gt-ie8 input.px:disabled + .lbl:before,
  .gt-ie8 input.px.disabled + .lbl:before,
  .gt-ie8 input.px:disabled + .lbl:after,
  .gt-ie8 input.px.disabled + .lbl:after {
    cursor: not-allowed !important;
  }
  .gt-ie8 input.px:disabled + .lbl:before,
  .gt-ie8 input.px.disabled + .lbl:before {
    background: #eee !important;
    border-color: #d6d6d6 !important;
  }
  .gt-ie8 input.px:disabled + .lbl:after,
  .gt-ie8 input.px.disabled + .lbl:after {
    opacity: .5 !important;
  }
  </code></pre>