不允许选择值的单选按钮图像答案

【问题标题】：Radio Button Images Not Allowing Value Seelection不允许选择值的单选按钮图像
【发布时间】：2014-04-11 17:17:54
【问题描述】：

我正在尝试使用图像代替单选按钮。当我不使用图像时，我可以正确选择“男性/女性”值。但是，当我对 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;
}

【问题讨论】：

标签： html css forms radio-button

【解决方案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/

【讨论】：

【解决方案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

【讨论】：