我想,而不是标准的单选按钮,为每个单选按钮使用不同的图像。对于选定的状态,我希望边框在图像周围出现。如何用图像替换替换单选按钮?
我已经尝试制作单选按钮的图像标签,然后隐藏按钮,但似乎打破了功能出于某种原因。
我也遇到了这篇文章:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/,我可能以某种方式扭曲我的目的。
有没有更简单/更好的方法?
我想,而不是标准的单选按钮,为每个单选按钮使用不同的图像。对于选定的状态,我希望边框在图像周围出现。如何用图像替换替换单选按钮?
我已经尝试制作单选按钮的图像标签,然后隐藏按钮,但似乎打破了功能出于某种原因。
我也遇到了这篇文章:http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/,我可能以某种方式扭曲我的目的。
有没有更简单/更好的方法?
的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');
}
});
在演示源
- 全码;
我认为你不会找到比你添加到问题中的链接更简单的方法。这是我知道的唯一途径。我认为你有效地回答了你自己的问题。没有这个或那个东西的徽章?
而且,类似的问题在这里回答:Styling checkboxes, radio buttons and dropdowns
它包含几个预先构建的解决方案,你可以看看。如果没有更多关于你想要在视觉上完成什么的信息,我不能说它们中的任何一个会为你工作。
祝你好运!
我只有一小会儿前有同样的问题,发现这个jQuery的解决方案,它完美的作品,并很好地降低:
http://www.adamcoulombe.info/lab/jquery/select-box/
我用它来定制样式选择下拉菜单。这很容易实现。例如,将目标类别为$('.mySelectBoxClass')
的变量替换为$('select')
- 这将针对您网页上的所有选定元素。同样的规则适用于单选按钮。
我还没有研究,但是,这个听起来前途: http://www.thecssninja.com/css/custom-inputs-using-css
+1 for pure- CSS解决方案。 Lea Verou描述了同样的方法[在本演示中](http://lea.verou.me/css3-secrets/#custom-form-controls)。 – GeReV 2013-02-15 17:15:23
刚刚尝试过这个cssninja,它是迄今为止我见过的最好的解决方案。主要优点是它不会与其他jquery单选按钮操作冲突,如.prop('checked',true)就像aSeptik的答案一样 – BaronVonKaneHoffen 2013-07-11 00:13:44
我提出了两种不同的解决方案:
/*
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>
很好的答案!感谢你们所有的例子。 – 2014-12-04 17:14:01
是的,有!这是简单的方法的例子:
无需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>
我觉得这是最简单的方法之一!非常感谢。 – mvsagar 2015-02-21 11:30:14
这是一个很好的答案 – user3658423 2015-03-20 08:04:51
最简单的答案 – Gangesh 2016-06-29 22:32:47
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了很好的解决方案!
非常简单的解决方案,我在网上找到。
http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output
这相当不错!但是,在StackOverflow上,它只是把一个链接答案[(*参见这个meta post *)](http://meta.stackoverflow.com/questions/251006/flagging-link-only-answers)。如果您在帖子中解释了一些解决方案,或者更好,请使用StackOverflows新的嵌入代码段来包含一个可行的示例,然后您肯定会获得我的赞赏。 (当然,留下链接作为归属) – 2015-07-01 22:22:33
类似的东西,但这样会起到很好的与Prototype和Scriptaculous – 2011-02-25 03:33:38
你不需要对Scriptaculous的做到这一点,只是原型是对子级罚款,我觉得也不是那么困难重写我的代码,以便与它一起工作。 – 2011-02-25 03:52:09
我真的很感激这个帮助,我会积极/选择这个答案作为适当的解决方案,如果我今天找到时间来逐步完成解决方案 – 2011-02-25 15:15:12