Question

我的HTML表单上有两个单选按钮。我希望一个按钮看起来像男性，另一个按钮看起来像女性。目前我只能使按钮看起来像男性。我不能让他们拥有自己的背景图片，他们只能分享图像。这是我的HTML代码，

<input type="radio" id="radio1" name="i_am"/>
<label for="radio1"></label>
<input type="radio" id="radio2" name="i_am"/>
<label for="radio2"></label>

这是我的CSS代码，

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

input[type="radio"] + label
{
    height: 100px;
    width: 60px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
   background:url(../images/people.png) 0 0;
    height: 100px;
    width: 60px;
    display:inline-block;
    padding: 0 0 0 0px;
}

如何让radio1具有男性的背景，而radio2具有女性的背景。

目前我的代码只使单选按钮看起来像男性。我需要知道他们如何能有单独的背景图像。

Answer 1

您已经使用了属性选择器 - 只需将其展开到标签上即可。使用不同的图像为每个标签添加单独的语句：

input[type="radio"]:checked + label {
    display: inline-block;
    height: 100px;
    width: 60px;
    padding: 0;
    background-position: 0 0;
    background-repeat: none;
    background-position: top center;
}

input[type="radio"]:checked + label[for="radio1"] {
    background-image: url("../images/male.png");
}

input[type="radio"]:checked + label[for="radio2"] {
    background-image: url("../images/female.png");
}

提示：使用CSS sprites代替单张图片可以提高加载性能。

如何为单选按钮分别设置图像 - HTML＆amp; CSS

1 个答案: