Html 如何用图像替换单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5112995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to replace radio buttons with images?
提问by Zach Lysobey
I would like to, instead of the standard radio button, use distinct images for each radio button. For the selected state I would like for a border to appear around the image.
我想，而不是标准的单选按钮，为每个单选按钮使用不同的图像。对于选定状态，我希望图像周围出现边框。
I have tried making the images labels for the radio button and then hiding the button, but that seems to break the functionality for some reason.
我曾尝试为单选按钮制作图像标签，然后隐藏按钮，但这似乎由于某种原因破坏了功能。
I also have come across this article: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/which I could potentially somehow twist to my purposes.
我也遇到过这篇文章：http: //ryanfait.com/resources/custom-checkboxes-and-radio-buttons/，我可能会以某种方式扭曲我的目的。
Is there an easier/better way?
有没有更简单/更好的方法？
回答by Ari
Yes, there is! This is an example of the simple ways:
就在这里！这是简单方法的示例：
No need for javascript
不需要javascript
CSS
CSS
.radio_item{
display: none !important;
}
.label_item {
opacity: 0.1;
}
.radio_item:checked + label {
opacity: 1;
}
HTML
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>
回答by Luca Filosofi
jQuery
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');
}
});
- full code in demo source;
- 演示源中的完整代码；
回答by HMagdy
I can propose two different solutions:
我可以提出两种不同的解决方案：
/*
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;
}
with HTML
使用 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>
回答by Christopher Davies
I haven't looked into it, but this sounds promising: http://www.thecssninja.com/css/custom-inputs-using-css
我没有研究过，但这听起来很有希望：http: //www.thecssninja.com/css/custom-inputs-using-css
回答by Dan
I had the same problem only a short while ago and found this jQuery solution which works perfectly and degrades nicely:
不久前我遇到了同样的问题，并发现了这个 jQuery 解决方案，它可以完美运行并且可以很好地降级：
http://www.adamcoulombe.info/lab/jquery/select-box/
http://www.adamcoulumbe.info/lab/jquery/select-box/
I used it to custom style select drop downs. It is very easy to implement. Replace the variable from $('.mySelectBoxClass')which targets the class to $('select')for example - and this would target all select elements on your page. The same rule would apply for radio buttons.
我用它来自定义样式选择下拉列表。这很容易实现。替换以$('.mySelectBoxClass')类为目标的变量$('select')，例如 - 这将针对页面上的所有选择元素。相同的规则适用于单选按钮。
回答by Dubmun
I don't think you'll find an easier way to do it than the link you added to your question. That is the only way I know of. I think you effectively answered your own question. Isn't there a badge for that or something?
我认为您找不到比添加到问题的链接更简单的方法了。这是我所知道的唯一方法。我认为你有效地回答了你自己的问题。不是有徽章之类的吗？
Also, a similar question was answered here: Styling checkboxes, radio buttons and dropdowns
此外，这里也回答了一个类似的问题：样式复选框、单选按钮和下拉菜单
It contains a few more pre-built solutions that you can check out. Without more information on what you are trying to accomplish visually, I can't say if any of them will work for you.
它包含一些更多的预构建解决方案，您可以查看。如果没有更多关于您想要在视觉上完成什么的信息，我不能说它们中的任何一个是否适合您。
Good luck!
祝你好运！
回答by lbbrooks
There is a bug with aSeptik's solution where if you click a checked radio button, it unchecks it. I corrected it by making the adjustment below.
aSeptik 的解决方案存在一个错误，如果您单击选中的单选按钮，它会取消选中它。我通过进行下面的调整来纠正它。
$('a.radio-fx').on('click', function(e) {
e.preventDefault();
if($(this).prev('input:radio').is(':checked')) return;
...
so...
所以...
$('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');
}
});
Thank you aSeptik for the great solution!
感谢 aSeptik 的出色解决方案！
回答by eliprodigy
very simple solution that i found on the net.
我在网上找到的非常简单的解决方案。
http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output
http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output
