javascript 用图像、CSS 或纯 JS 替换单选按钮。一些限制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17322201/
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
Replace radio buttons with images, with CSS or Pure JS. Some restrictions
提问by OneEightLeft
<label for="apsgender">
<div class="join-label">Gender</div>
</label>
<fieldset id="gender_male">
<input type="radio" name="apsgender" value="1">
Male
</fieldset>
<fieldset id="gender_female">
<input type="radio" name="apsgender" value="2">
Female
</fieldset>
This is the code I am dealing with right now. Setting up my css with this method I took from another stackoverflow post is not working because of the use of fieldsets and odd label up front.
这是我现在正在处理的代码。使用我从另一个 stackoverflow 帖子中获取的这种方法设置我的 css 不起作用，因为前面使用了字段集和奇数标签。
input[type="radio"] {
display:none;
}
label {
display:block;
padding-left:30px;
font-family:Arial;
font-size:16px;
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
}
input[type="radio"]:checked + label {
background: url('http://particletree.com/examples/buttons/tick.png') left center no-repeat;
}
Our development team set this code up and I guess no one has ever attempted to use images for radio buttons. Also I could use pure JS, if it's possible, but i can only place the scripts in the body before the elements, not after.
我们的开发团队设置了这段代码，我想没有人尝试过将图像用于单选按钮。如果可能的话，我也可以使用纯 JS，但我只能将脚本放在元素之前的正文中，而不是之后。
Let me know if this is even possible. Thanks in advance.
让我知道这是否可能。提前致谢。
I'll post the jsFiddle i'm working on but literally it's going no where. http://jsfiddle.net/z25FR/1/
我会发布我正在处理的 jsFiddle，但实际上它无处可去。http://jsfiddle.net/z25FR/1/
回答by casraf
I have a CSS solution for this, but some HTML will need to change.
我有一个 CSS 解决方案，但需要更改一些 HTML。
First of all, we need to hide the radio button, because it can't be styled:
首先，我们需要隐藏单选按钮，因为它无法设置样式：
input[type="radio"]{
display: none;
}
Then, we make the text near the radio button a label:
然后，我们将单选按钮附近的文本作为标签：
<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>
(don't forget the idand foror you won't have how to check the radio button)
（不要忘记id和for否则您将无法检查单选按钮）
Then, we style the label to look like it's a button:
然后，我们将标签样式设置为看起来像一个按钮：
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
The above code will modify the label directly following the radio button. Then, we can change the background to another image when the radio button is :checked:
上面的代码会直接修改单选按钮后面的标签。然后，当单选按钮为 时，我们可以将背景更改为另一个图像:checked：
input[type="radio"]:checked+label{
background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}
回答by Ryan B
While this may not help, I will mention you're incorrectly coding the HTML. It should be:
虽然这可能无济于事，但我会提到您对 HTML 的编码不正确。它应该是：
<fieldset>
<legend>Gender</legend>
<input type="radio" name="apsgender" id="m" value="1">
<label for="m">Male</label>
<input type="radio" name="apsgender" id="f" value="2">
<label for="f">Female</label>
</fieldset>
I have seen custom radio buttons, but don't have a source. However, depending how it is done may have some accessibility implications
我见过自定义单选按钮，但没有来源。但是，取决于它的完成方式可能会产生一些可访问性影响
回答by Aakil Fernandes
You need to use Javascript to rewrite the HTML, and then CSS for the field switching. Everything can go in the head and no need to touch the template.
您需要使用Javascript 重写HTML，然后使用CSS 进行字段切换。一切都可以进入头脑，无需触摸模板。
JS:
JS：
window.onload=function(){
gender_male.innerHTML='<input type="radio" name="apsgender" value="1" checked><label>Male</label>';
gender_female.innerHTML='<input type="radio" name="apsgender" value="2"><label>Female</label>';
}
CSS:
CSS：
fieldset{position:relative}
input[type="radio"]{
opacity: 0;
position:absolute;
}
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
input[type="radio"]:checked+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png') left center no-repeat;
padding-left: 30px;
}
