title: Checkbox not styled in Firefox but Chrome fine
body: <p>I have a checkbox which I have styled in css, and not using any of the label selectors. I will be using this on a page which has 10 checkboxes and no labels around them, so can't use any of that code.</p>
  
  <p>I have this working fine with Chrome, but FireFox 29 fails to render the checkboxes properly and I am not sure why!</p>
  
  <p>I have created a code pen here.
  <a href="http://codepen.io/anon/pen/ACKrH" rel="nofollow">http://codepen.io/anon/pen/ACKrH</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
        &lt;input type="checkbox" value="None" id="cb" name="check" checked /&gt;
        &lt;label for="cb"&gt;My label&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>input[type="checkbox"] {
      -webkit-appearance: none !important;
      -moz-appearance:    none !important;
      appearance:         none !important;
      background-color: #dde1e2;
      border-radius: 5px;
      padding: 8px;
      margin-bottom: 0;
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 20px;
      width: 20px;
  }
  
  input[type="checkbox"]:active,
  input[type="checkbox"]:checked:active {
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }
  
  input[type="checkbox"]:checked {
      background-color: #5fa8cf;
      border: 1px solid #5fa8cf;
      color: #777;
  }
  
  input[type="checkbox"]:checked:after {
      content: '\2714';
      font-size: 14px;
      position: absolute;
      top: 0px;
      left: 3px;
      color: white;
  }
  </code></pre>
  
  <p>Any ideas?</p>