Question

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

以下是我用过的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;
        }

由于

Answer 1

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

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

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

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

为了在选择单选按钮时更改图像，我在这里修改了你的小提琴：

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

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

Answer 2

之前曾问过这个问题：

你会发现你需要知道的一切。

再看看Stackoverflow： enter image description here

PS。互联网让人感到悲伤的是，广告（垃圾）已经变得如此充满，以至于没有人会关心其中的内容。

如何使用图像设置单选按钮

2 个答案: