我怎样才能用图像设置单选按钮答案

【问题标题】：how can I Style radio buttons with images我怎样才能用图像设置单选按钮
【发布时间】：2013-01-28 00:29:10
【问题描述】：

我想设置我的单选按钮的样式，以便它们使用未选中和选中的图像。

以下是我用过的css：

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

我使用的代码似乎已经拾取了未选择的图像，但它周围有一个奇怪的边框，当我点击它而不是用新的背景图像替换未选择的图像时，它只是在其中放置了一个大黑点那里请看：

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

重要的是，这项工作在包括 ie7 和 8 在内的浏览器中工作，我正在使用 jquery，所以很乐意使用 jquery 选项。

编辑

最终解决如下：

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

使用 jquery 库：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;
        }

谢谢

【问题讨论】：

标签： jquery css radio-button

【解决方案1】：

通常接受的方法是使用带有“for”属性的标签，该标签与相关无线电输入的“ID”相匹配。

然后你只需给收音机输入位置：绝对和隐藏的可见性，并将你想要的图像/文本等放在标签内。

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

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

为了在选择单选按钮时更改图像，我在此处修改了您的小提琴：

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

您可以使用该小提琴中的主体将图像设置为标签的背景或标签内的跨度，并在检查时更改背景，就像我在示例中使用背景颜色一样。

【讨论】：

好的，我已经这样做了，但是我需要在检查时添加不同的图像：jsfiddle.net/afnguyen/mMr9e/2
我已经在上面编辑了我的答案，并提供了一个可以帮助你的更新。
感谢您抽出时间不是我需要的，但让我上路

【解决方案2】：

之前有人问过这个问题：

你会找到所有你需要知道的。

再看看 Stackoverflow ：

ps。互联网变得可悲的是，它充满了广告（垃圾），以至于没有人再关心其他内容了。

【讨论】：