Clever Geek Handbook

How can I customize radio buttons with images

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

Below is the css I 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 used seems to have picked up an unselected image, but has a weird border around it, and when I click on it rather than replace the unselected image with a new background, it just puts a big black dot in there see:

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

The important thing is that this works in browsers including ie7 and 8, and I am using jquery, so happy to use the jquery option.

Edit

Finished solving this question:

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

thank

+3


source to share


2 answers


A common method for this is to use a label with an attribute "for" that matches the "identifier" of the corresponding radio input.

Then you just specify the position of the radio input: absolute and visible hidden and place the image / text you want, etc. inside the label.

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

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


To change the image when a radio button is selected, I changed your fiddle here:

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

You could use the principal in this script to possibly set the image as the background of the label or spacing in the label, and change the background when it was set like I do with the background color in my example.

+2


source


this question has been asked before:

You will find everything you need to know.



Take another look at Stackoverflow: enter image description here

ps. What gets sad about the internet is that it's so filled with ads (junk) that nobody else cares about the content.

+1


source






More articles:


All Articles