Question

我想，而不是标准单选按钮，为每个单选按钮使用不同的图像。对于选定的状态，我希望在图像周围出现边框。

我尝试为单选按钮制作图像标签然后隐藏按钮，但这似乎因某种原因而破坏了功能。

我也遇到过这篇文章：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/我可能会以某种方式扭曲我的目的。

有更简单/更好的方式吗？

Answer 1

是的，有！这是一个简单方法的例子：

不需要javascript

<强> CSS

.radio_item{
display: none !important;
}

.label_item {
opacity: 0.1;
}

.radio_item:checked + label {
opacity: 1;
}

<强> HTML

<!--RADIO 1-->
<input type="radio" class="radio_item" value="" name="item" id="radio1">
<label class="label_item" for="radio1"> <img src="img_url_here"> </label>

<!--RADIO 2-->
<input type="radio" class="radio_item" value="" name="item" id="radio2">
<label class="label_item" for="radio2"> <img src="img_url_here"> </label>

<强> FIDDLE

Answer 2

DEMO： http://so.lucafilosofi.com/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/

<强>的jQuery

        $('input:radio').hide().each(function() {
            $(this).attr('data-radio-fx', this.name);
            var label = $("label[for=" + '"' + this.id + '"' + "]").text();
            $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
                '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
        });
        $('a.radio-fx').on('click', function(e) {
            e.preventDefault();
            var unique = $(this).attr('data-radio-fx');
            $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
            $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
            $(this).find('span').attr('class','radio-checked');
            $(this).prev('input:radio').attr('checked',true);
        }).on('keydown', function(e) {
            if ((e.keyCode ? e.keyCode : e.which) == 32) {
                $(this).trigger('click');
            }
        });

演示源中的完整代码;

Answer 3

我可以提出两种不同的解决方案：

CSS SOLUTION:

/*
  Hide radio button (the round disc)
  we will use just the label to create push button effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radio buttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

使用HTML

<input type="radio" id="radio1" name="radios" value="all" checked>
   <label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios"value="false">
   <label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
   <label for="radio3">Nexus S</label>

<强> JAVASCRIPT SOLUTION

Demo Here

Answer 4

我没有调查过，但这看起来很有希望： http://www.thecssninja.com/css/custom-inputs-using-css

Answer 5

我不久之前遇到了同样的问题，发现这个jQuery解决方案效果很好并且降级很好：

http://www.adamcoulombe.info/lab/jquery/select-box/

我用它来自定义样式选择下拉菜单。它很容易实现。例如，将$('.mySelectBoxClass')中的变量替换为$('select')类的变量，这将针对您网页上的所有选择元素。同样的规则也适用于单选按钮。

Answer 6

我认为你找不到比你添加到问题中的链接更简单的方法。这是我所知道的唯一方式。我认为你有效地回答了你自己的问题。那个或那个没有徽章吗？

此外，这里也回答了类似的问题：Styling checkboxes, radio buttons and dropdowns

它包含一些您可以查看的预构建解决方案。如果没有关于你想要在视觉上实现什么的更多信息，我不能说它们中的任何一个是否适合你。

祝你好运！

Answer 7

aSeptik解决方案存在一个错误，如果您单击选中的单选按钮，则会将其取消选中。我通过下面的调整纠正了它。

$('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        ...

所以...

$('input:radio').hide().each(function() {
        $(this).attr('data-radio-fx', this.name);
        var label = $("label[for=" + '"' + this.id + '"' + "]").text();
        $('<a ' + (label != '' ? 'title=" ' + label + ' "' : '' ) + ' data-radio-fx="'+this.name+'" class="radio-fx" href="#">'+
            '<span class="radio' + (this.checked ? ' radio-checked' : '') + '"></span></a>').insertAfter(this);
    });
    $('a.radio-fx').on('click', function(e) {
        e.preventDefault();
        if($(this).prev('input:radio').is(':checked')) return;
        var unique = $(this).attr('data-radio-fx');
        $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');
        $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);
        $(this).find('span').attr('class','radio-checked');
        $(this).prev('input:radio').attr('checked',true);
    }).on('keydown', function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 32) {
            $(this).trigger('click');
        }
    });

感谢aSeptik提供了出色的解决方案！

Answer 8

我在网上找到的非常简单的解决方案。

http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output

如何用图像替换单选按钮？

8 个答案: