title: Server control checkbox cannot be checked in ASP.NET?
body: <p>I am trying to create a toggle button in my project when i added a server control checkbox the checkbox cannot be checked,but when i used a html control and that checkbox can be checked, What am i missing</p>
  
  <pre><code>&lt;div class="material-switch "&gt;
         &lt;asp:CheckBox ID="CheckBox1" runat="server" /&gt;
         &lt;label for="CheckBox1" class="label-primary" &gt;&lt;/label&gt;
      &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Css Used</p>
  </blockquote>
  
  <pre><code>.material-switch &gt; input[type="checkbox"] {
      display: none;   
  }
  
  .material-switch &gt; label {
      cursor: pointer;
      height: 0px;
      position: relative; 
      width: 40px;  
  }
  
  .material-switch &gt; label::before {
      background: rgb(0, 0, 0);
      box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      content: '';
      height: 16px;
      margin-top: -8px;
      position:absolute;
      opacity: 0.3;
      transition: all 0.4s ease-in-out;
      width: 40px;
  }
  .material-switch &gt; label::after {
      background: rgb(255, 255, 255);
      border-radius: 16px;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
      content: '';
      height: 24px;
      left: -4px;
      margin-top: -8px;
      position: absolute;
      top: -4px;
      transition: all 0.3s ease-in-out;
      width: 24px;
  }
  .material-switch &gt; input[type="checkbox"]:checked + label::before {
      background: inherit;
      opacity: 0.5;
  }
  .material-switch &gt; input[type="checkbox"]:checked + label::after {
      background: inherit;
      left: 20px;
  }
  </code></pre>