用图片、CSS 或 Pure JS 替换单选按钮。一些限制答案

【问题标题】：Replace radio buttons with images, with CSS or Pure JS. Some restrictions用图片、CSS 或 Pure JS 替换单选按钮。一些限制
【发布时间】：2013-06-23 17:13:53
【问题描述】：

<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>

这是我现在正在处理的代码。使用我从另一个 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;
}

我们的开发团队设置了这段代码，我想没有人尝试将图像用于单选按钮。如果可能的话，我也可以使用纯 JS，但我只能将脚本放在元素之前的正文中，而不是之后。

让我知道这是否可能。提前致谢。

我将发布我正在开发的 jsFiddle，但实际上它无处可去。 http://jsfiddle.net/z25FR/1/

【问题讨论】：

如果您最终选择了 javascript 路线，您可以使用document.onload 来解决展示位置问题。

标签： javascript html css forms

【解决方案1】：

我有一个 CSS 解决方案，但需要更改一些 HTML。

fiddle

首先，我们需要隐藏单选按钮，因为它无法设置样式：

input[type="radio"]{
    display: none;
}

然后，我们将单选按钮附近的文本设为标签：

<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>

（不要忘记id 和for 否则您将无法检查单选按钮）

然后，我们为标签设置样式，使其看起来像一个按钮：

input[type="radio"]+label{
    background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
    padding-left: 30px;
}

上面的代码会直接修改单选按钮后面的标签。然后，当单选按钮为:checked时，我们可以将背景更改为另一张图片：

input[type="radio"]:checked+label{
    background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}

【讨论】：

已更新以使其可点击：jsfiddle.net/sysGj。您应该制作单选按钮 opacity:0 而不是 display:none 以保持其可点击性。请注意，还有一些其他 CSS 调用使其对旧浏览器不可见。一旦它不可见，使用绝对定位将不可见的单选按钮移动到标签上（带有背景图像）
否 - 因为标签，它是可点击的。单击标签，单选按钮更改 - 这就是重点。你的方法也有效，但这不是我的目标:)
对不起，我觉得我说得不够清楚，这不是我的 HTML。我正在处理 CMS 中的模板。
根本就没有办法把文字做成标签吗？并将 ID 添加到单选按钮？无法自行设置单选按钮的样式，因此没有真正的替代方案。
@ChenAsraf，当我在 Chrome 中尝试时，单击标签不起作用。

【解决方案2】：

虽然这可能无济于事，但我会提到您对 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>

我见过自定义单选按钮，但没有来源。但是，根据它的完成方式可能会产生一些可访问性影响

【讨论】：

【解决方案3】：

http://jsfiddle.net/nm3uB/1/

您需要使用Javascript重写HTML，然后使用CSS进行字段切换。一切都在头脑中，无需触摸模板。

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：

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;
}

【讨论】：