Question

我正在尝试使用图像代替单选按钮。当我不使用图像时，我可以选择男性/女性＆＃39;价值正确。但是，当我对css进行样式化以使用图像时，值始终默认为男性。使用的图像是一个样本。你可以帮我在下面的代码中指出我的错误。此外，任何人都可以提供有关如何使用不同图像的任何指针。

HTML：

<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale"></label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale"></label>

CSS：

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

input[type="radio"] + label {
    display:inline;
    font-size: 18px;
}

input[type="radio"] + label:before {
    content:'';
    display:inline-block;
    width: 320px;
    height: 320px;
    background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"]:checked + label:before {
    content:'';
    background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
    border-style: solid;
    border-width: 10px;
}

Answer 1

如果您可以将:before标记放在img内，则无需使用label：

<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale">
    <img src="..." />
</label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale">
    <img src="..." />
</label>

然后从CSS中删除:before

小提琴：http://jsfiddle.net/L94mK/

Answer 2

据我所知，它正在返回正确的价值...请查看JSFiddle

对于为单选按钮提供不同的图像，您可以使用nth-child css选择器，如下所示：

input[type="radio"]:nth-child(1) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:nth-child(3) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(some other url for female image) no-repeat;
vertical-align: middle;
}

选中此JSFiddle

单选按钮图像不允许选择值

2 个答案: