title: how can I Style radio buttons with images
body: <p>I want to style my radio buttons so that they use an image for unselected and selected.</p>
  
  <p>The following is the css i have used:</p>
  
  <pre><code> input[type="radio"]
          {
              background: url("https://where-to-buy.co/content/images/selector.png")no-repeat;
              padding: 0;
              display: inline-block;
              appearance: none;
              -moz-appearance: none;
              -webkit-appearance: none;
              width: 20px;
              height: 20px;
              vertical-align: middle;
              border: 1px solid black;
          }
          input[type="radio"]:checked
          {
              background: url("https://where-to-buy.co/content/images/selectorhighlighted.png")no-repeat;
          }
  </code></pre>
  
  <p>The code I've used seems to have picked up the unselected image ok but has a weird border round it and when I click on it rather than replacing the unselected image with the new background image it just put a large black dot in there please see:</p>
  
  <p><a href="http://jsfiddle.net/afnguyen/mMr9e/" rel="nofollow">http://jsfiddle.net/afnguyen/mMr9e/</a></p>
  
  <p>It is important that this work across browsers including ie7 and 8 and i am using jquery so would happy use an jquery option.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Ended up solving it as follows:</p>
  
  <p><a href="http://jsfiddle.net/afnguyen/GSrZp/" rel="nofollow">http://jsfiddle.net/afnguyen/GSrZp/</a></p>
  
  <p>using jquery library: <a href="http://code.jquery.com/jquery-1.8.3.min.js" rel="nofollow">http://code.jquery.com/jquery-1.8.3.min.js</a></p>
  
  <p>jquery:</p>
  
  <pre><code> $(document).ready(function () {
  
              $(function () {
  
                  $('input:radio').hide().each(function () {
  
                      var label = $("label[for=" + '"' + this.id + '"' + "]").text();
  
                      $('&lt;a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"&gt;&lt;span class="radio"&gt;&lt;/span&gt;&lt;/a&gt;').insertAfter(this);
  
                  });
  
                  $('.radio-fx').on('click', function (e) {
  
                      $check = $(this).prev('input:radio');
  
                      var unique = '.' + this.className.split(' ')[1] + ' span';
  
                      $(unique).attr('class', 'radio');
  
                      $(this).find('span').attr('class', 'radio-checked');
  
                      $check.attr('checked', true);
  
                      var selValue = $('input[name=rbnNumber]:checked').val().split(",")[0];
  
                      var rpValue = $('input[name=rbnNumber]:checked').val().split(",")[1];
  
                      $('input[name=retailerProductId]').val(selValue);
  
                      $('span[class=actualPrice]').text(rpValue);
  
                       $('input[name=rbnNumber]').attr('disabled', 'disabled' );
  
                      $(".radio").attr('disabled', 'disabled' );
  
                        $(".radio").css("opacity", "0.3")
  
                      $(".radio-checked").css("opacity", "1")
  
                      $("#332527").css("opacity", "0.5")
  
                      $("#114578").css("opacity", "0.5")
  
                      $("#108660").css("opacity", "0.5")
  
                      $("#373455").css("opacity", "0.5")
  
                      var rpSelected = $("#retailerProductId").val();
  
                      $('#' + rpSelected).css("opacity", "1");
  
  
                  }).on('keydown', function (e) {
  
                      if (e.which == 32) {
  
                          $(this).trigger('click');
  
                      }
  
                  });
  
              });
  
  
  
          });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>                    &lt;div class="divRadiobtns"&gt;
                          &lt;input class="radioOptions" type="radio" name="rbnNumber" value="332527, £2.89" /&gt;
                          &lt;input class="radioOptions" type="radio" name="rbnNumber" value="114578, £2.59" /&gt;
                          &lt;input class="radioOptions" type="radio" name="rbnNumber" value="108660, £2.60" /&gt;
                      &lt;/div&gt;
                      &lt;div class="divInputs"&gt;
                          &lt;input type="hidden" name="retailerProductId" id="retailerProductId" class="retailerProductId"&gt;&lt;/input&gt;
                          &lt;span class="actualPrice"&gt;&lt;/span&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code> .radioOptions
          {
          }
  
  
  
          .divRadiobtns
          {
              float: left;
              width: 20px;
          }
  
  
          a.radio-fx span, a.radio-fx
          {
              display: inline-block;
              padding-bottom: 14px;
              padding-top: 14px;
              float: left;
          }
  
          .divRadiobtns .radio, .divRadiobtns .radio-checked, .divRadiobtns a.radio-fx
          {
              height: 18px;
              padding-bottom: 14px;
              padding-top: 14px;
              width: 32px;
              float: left;
          }
  
  
  
          .divRadiobtns .radio
          {
              background: url(https://where-to-buy.co/content/images/selector.png) no-repeat;
          }
  
          .divRadiobtns .radio-checked
          {
              background: url(https://where-to-buy.co/content/images/selectorhighlighted.png) no-repeat;
          }
  </code></pre>
  
  <p>Thanks</p>