title: Hidden element with visible :after - CSS
body: <p>I have recently created a way to style HTML checkboxes and radio buttons, but it requires adding additional elements to it, like a <code>&lt;p&gt;</code> or a <code>&lt;span&gt;</code>. This isn't terrible inconvenient, but when you're styling (CSS) a complete web software, having to go back and rewrite every checkbox can be annoying.</p>
  
  <p>I recently just had a "revelation" about how to style them without using any additional elements, and it works amazingly in Chrome, but in Firefox, well, lets just say it doesn't work.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;input type="checkbox" /&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>input[type="checkbox"]
  {
      visibility:hidden;
  }
  
  input[type="checkbox"]:after
  {
      visibility:visible;
      content:"W";
      display:block;
      background:#0ab9bf;
      width:20px;
      line-height:20px;
      text-align:center;
      height:20px;
      overflow:hidden;
      text-indent:-100px;
  }
  
  input[type="checkbox"]:checked:after
  {
      text-indent:0;
  }
  </code></pre>
  
  <p>I was hoping that someone here can help? Keep in mind that I am looking for a strictly CSS solution to this. I will seek a javascript solution only as a last resort. Until then, my hopes are high.</p>
  
  <p>I guess my question is, what is preventing Firefox from showing the "checkbox?" And how can I fix this. Is there a different way to go about doing this?</p>