title: Styling @Html.CheckBoxFor as a slider
body: <p>I'm having trouble styling a checkbox generated by <code>@Html.CheckBoxFor()</code> as a slider.</p>
  
  <p>I've identified the "culprit" to be the hidden input field. I've made a <a href="https://dotnetfiddle.net/t2ojpY" rel="nofollow noreferrer">fiddle</a> to illustrate the problem. It contains 3 checkboxes - one generated by <code>@Html.CheckBoxFor()</code>, the second one using the code generated by <code>@Html.CheckBoxFor()</code> with the hidden input commented out and the third classic checkbox.</p>
  
  <p>You will see the slider is not working for the first one. I do need to use <code>@Html.CheckBoxFor()</code> because I want the checkbox to be bound to a property on my model, but can't figure out how to make the slider styling work...</p>
  
  <p>In my view I have:</p>
  
  <pre><code>&lt;div class="slider"&gt;
      @Html.CheckBoxFor(m =&gt; m.IsChecked, new { @class = "toggle-pill" })
      @Html.LabelFor(m =&gt; m.IsChecked, new { @class = "toggle-label" })
  &lt;/div&gt;
  </code></pre>
  
  <p>The .css for styling it:</p>
  
  <pre><code>.slider [type="checkbox"] {
      display: none;
  }
  
  .slider .toggle-label {
      display: block;
      width: 40px;
      height: 20px;
      position: relative;
      background: #ed495c;
      border-radius: 10px;
      transition: background 0.2s ease;
      cursor: pointer;
  }
  
  .slider .toggle-label::before {
      content: '';
      display: block;
      width: 50%;
      height: 100%;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 0 1px #d1d1d1;
      position: absolute;
      left: 0;
      top: 0;
      transition: transform 0.2s ease-in-out;
  }
  
  .slider [type="checkbox"]:checked + .toggle-label {
      background: #93ed49;
  }
  
  .slider [type="checkbox"]:checked + .toggle-label::before {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
  }
  </code></pre>
  
  <p>The model property, <code>IsChecked</code>, is typeof <code>bool</code>.</p>