Question

您好我希望每个收音机按钮的其他图像都不是所有按钮的相同图像。我该怎么办？我尝试了很多方法，但没有一个工作过..

我的代码只有1 img的所有单选按钮是：

<head>
<style>
input[type=radio]:before {
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    position: absolute;
    background-image: url(img.png);
    background-size: 50px 50px;
    pointer-events: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

input[type=radio]:checked:before {
    background-image: url(img.png);
        border:2px solid #3e6cd4;
          box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.radiostyle {
    display:inline-block;
    width: 50px;
    height: 50px;
    background-color: blue;

}

</style>
</head>
<body>
<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">
</body>

感谢您的帮助！

Answer 1

您可以使用其他CSS选择器，否则添加单独的类或ID：

input[type="radio"][value="1"]:before {
    background-image: url(img1.png);
}

input[type="radio"][value="1"]:checked:before {
    background-image: url(img1.png);
}

input[type="radio"][value="2"]:before {
    background-image: url(img2.png);
}

input[type="radio"][value="2"]:checked:before {
    background-image: url(img2.png);
}

input[type="radio"][value="3"]:before {
    background-image: url(img3.png);
}

input[type="radio"][value="3"]:checked:before {
    background-image: url(img3.png);
}

Answer 2

添加另一个具有不同图像属性的类。 JsFiddle Link Demo

例如：

.first_image:checked:before { border:2px solid blue; } 
.second_image:checked:before { border:2px solid green; } 
.third_image:checked:before { border:2px solid red; } 

<input type="radio" name="radio1" class="radiostyle first_image " value="1">
<input type="radio" name="radio1" class="radiostyle second_image " value="2">
<input type="radio" name="radio1" class="radiostyle third_image" value="3">

Answer 3

我认为你应该在初始声明之后为每个选项添加一个类名，例如：

input[type=radio].button1:before {
    background-image: url(img2.png);
 }

input[type=radio].button1:checked:before {
    background-image: url(img3.png);
 }

 [...]

在您的代码中，您应该使用：

<input type="radio" name="radio1" class="radiostyle button1" value="1">
<input type="radio" name="radio1" class="radiostyle button2" value="2">
<input type="radio" name="radio1" class="radiostyle button3" value="3">

CSS + HTML单选按钮 - 每个按钮都有其他img如何？

3 个答案: