how can I Style radio buttons with images

Question

I want to style my radio buttons so that they use an image for unselected and selected.

The following is the css i have used:

 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;
        }

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:

http://jsfiddle.net/afnguyen/mMr9e/

It is important that this work across browsers including ie7 and 8 and i am using jquery so would happy use an jquery option.

Edit

Ended up solving it as follows:

http://jsfiddle.net/afnguyen/GSrZp/

using jquery library: http://code.jquery.com/jquery-1.8.3.min.js

jquery:

 $(document).ready(function () {

            $(function () {

                $('input:radio').hide().each(function () {

                    var label = $("label[for=" + '"' + this.id + '"' + "]").text();

                    $('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').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');

                    }

                });

            });



        });

HTML:

                    <div class="divRadiobtns">
                        <input class="radioOptions" type="radio" name="rbnNumber" value="332527, £2.89" />
                        <input class="radioOptions" type="radio" name="rbnNumber" value="114578, £2.59" />
                        <input class="radioOptions" type="radio" name="rbnNumber" value="108660, £2.60" />
                    </div>
                    <div class="divInputs">
                        <input type="hidden" name="retailerProductId" id="retailerProductId" class="retailerProductId"></input>
                        <span class="actualPrice"></span>
                    </div>

css:

 .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;
        }

Thanks

Answer 1

this question was asked before :

• How do I style (css) radio buttons and labels?
• How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?
• Good HTML and CSS to use with <input type="radio">?
• CSS3 - Style radio inputs using the :checked selector on older browsers (ie7/ie8)

You'll find all you need to know.

Take another look at Stackoverflow :

ps. What's becoming sad about the internet is that it is getting so filled with ads (junk) that no-one cares anymore about aside contents.

Answer 2

The generally accepted way to do this is to use a label with a "for" attribute which matches the "ID" of the relevant radio input.

Then you simply give the radio input position:absolute and visibility hidden and put your desired image/text etc inside the label.

<input type="radio" id="radio1" name="radio">

<label for="radio1"><img src=my-image.jpg></label>

To make the image change when a radio button is selected I've amended your fiddle here:

http://jsfiddle.net/mMr9e/3/

You could use the principal in that fiddle to maybe set the image as the background to the label or a span within the label and change the background when it's checked like I'm doing with the background color in my example.