title: Css radio buttons problem - How to style each radio button?
body: <p>How to style each radio button?</p>
  
  <p>I have tried this:</p>
  
  <pre><code>div.radio-toolbar {width:410px;}
  
  .radio-toolbar input[type="radio"] {
      display:none;
  }
  
  .radio-toolbar label {
      display:inline-block;
      background:#FFF;
      font-family:"Arial Black", sans-serif;
      font-size:12px;
      color:#666666;
      width:106px;
      padding-left:4px;
  }
  
  .radio-toolbar #radio1 [type="radio"]:checked + label {
      background:url("../images/radio1.png") no-repeat;
      color:#FFF;
  }
  .radio-toolbar #radio2 input[type="radio"]:checked + label {
      background:url("../images/radio2.png") no-repeat;
      color:#FFF;
  }
  .radio-toolbar #radio3 input[type="radio"]:checked + label {
      background:url("../images/radio3.png") no-repeat;
      color:#FFF;
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="radio-toolbar"&gt;
  
      &lt;input type="radio" id="radio1" name="radios" value="all" checked&gt;
      &lt;label for="radio1"&gt;Radio1&lt;/label&gt;
  
      &lt;input type="radio" id="radio2" name="radios"value="false"&gt;
      &lt;label for="radio2"&gt;Radio2&lt;/label&gt;
  
      &lt;input type="radio" id="radio3" name="radios" value="true"&gt;
      &lt;label for="radio3"&gt;Radio3&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>