title: Style a checkbox in firefox — remove check and border
body: <p>How do I style a checkbox in firefox, and have the checkmark and border disappear?</p>
  
  <p><a href="http://jsfiddle.net/moneylotion/qZvtY/">http://jsfiddle.net/moneylotion/qZvtY/</a></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>body { background: black; }
  #conditions-form { color: white; }
  #conditions-form input[type=checkbox] {
      display:inline-block;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance:none;
      appearance: none;
      width:19px;
      height:19px;
      background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
      cursor:pointer;
  }
  #conditions-form input[type=checkbox]:checked {
      background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form id="conditions-form"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;input id="condition3" type="checkbox" name="conditions[condition3]"&gt;&lt;/input&gt;
              &lt;label class="checkbox" for="condition3"&gt;Conditions 3&lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/form&gt;
  </code></pre>