title: Radio button background only with CSS?
body: <p>What I need to do is to replace the look of the radio button with image. That can be easily achieved with jQuery, but it this case I need to do it with CSS only. Is there any way to do that? Here is my HTML:</p>
  
  <pre><code>&lt;div class="radio-buttons"&gt;
      &lt;div class="holder"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;input type="radio" class="radio" id="cheetah" value="" /&gt;
      &lt;/div&gt;
      &lt;div class="holder"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;input type="radio" class="radio" id="horse" value="" /&gt;
      &lt;/div&gt;
      &lt;div class="holder"&gt;
          &lt;span&gt;&lt;/span&gt;
          &lt;input type="radio" class="radio" id="lion" value="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried to apply a style <code>background-image:</code> on the radio button, but of course it didn't work. Then I added the <code>&lt;span&gt;</code>'s and I am wonderig if I can set style to the buttons <code>display: none</code> , and somehow on <code>input:checked</code> to display the <code>&lt;span&gt;</code> which will be styled with <code>background-image:</code> ? Is this the right way or I am on completely wrong direction? And can it be achieved with CSS only at all ?</p>
  
  <p>Edit: the radio buttons might be changed to checkboxes if needed.</p>