使用CSS或Pure JS替换带图像的单选按钮。一些限制

时间:2013-06-26 14:00:02

标签: javascript html css forms

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

这是我正在处理的代码。使用此方法设置我的css我从另一个stackoverflow帖子中取出是不行的,因为前面使用了fieldsets和odd label。

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/

3 个答案:

答案 0 :(得分:4)

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

fiddle

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

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

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

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

(不要忘记idfor,否则你将无法检查单选按钮)

然后,我们将标签设置为看起来像是一个按钮:

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

答案 1 :(得分:3)

虽然这可能没什么用,但我会提到你编写错误的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>

我看过自定义单选按钮,但没有来源。但是,根据其完成方​​式可能会产生一些可访问性含义

答案 2 :(得分:2)

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