title: CSS -webkit-appearance: none; is causing checkbox to not be checked
body: <pre><code>All,
  </code></pre>
  <p>I have a checkbox that I applied the following CSS style to:</p>
  <pre><code>-webkit-appearance: none;
  </code></pre>
  <p>This same code is on some text fields I have and these still continue to work just fine. Why is this functionality causing the checkbox to not allowed to be checked?</p>
  <p>I like the styling of the checkbox this way but still need the functionality to work. If I change the code to:</p>
  <pre><code>-webkit-appearance: checkbox;
  </code></pre>
  <p>It displays the standard checkbox. Any ideas? Here is a demonstration:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* http://jsfiddle.net/VWC76/ */
  
  input[type='checkbox'] {
    height: 20px;
    border: 1px solid #B5B7B8;
    font: 14px/26px 'pt-sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    padding: 7px 7px 7px 12px;
    /*margin:0 0 30px 0;*/
    
    background: #FFF;
    border: 1px solid #d5d5d6;
    outline: none;
    color: #96999D;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    border-radius: 4px;
    transition: all 0.15s;
  }
  
  input[type=checkbox]:focus {
    border-color: #ACACB8;
    color: #2E3236;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
  }
  
  div {
      border: 1px inset #ccc;
      border-radius: 7px;
      margin: 1em;
      padding: 1em;
  }
  
  #webkitCheckbox {
      -webkit-appearance: checkbox;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;label&gt;
          &lt;input type="checkbox" /&gt;
          &lt;span&gt;This has &lt;code&gt;-webkit-appearance: none;&lt;/code&gt;&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;label&gt;
          &lt;input type="checkbox" id="webkitCheckbox" /&gt;
          &lt;span&gt;This has &lt;code&gt;-webkit-appearance: checkbox;&lt;/code&gt;&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>