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

【问题标题】：CSS+HTML Radio button - every button have other img how?CSS+HTML 单选按钮 - 每个按钮都有其他 img 如何？
【发布时间】：2014-06-14 02:36:21
【问题描述】：

您好，我希望每个单选按钮都拥有其他图像，而不是所有按钮的相同图像。我该怎么做？我尝试了很多方法，但都没有奏效..

我的所有单选按钮只有 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>

感谢您的帮助！

【问题讨论】：

标签： html css radio-button

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

只需为图像添加另一个具有不同属性的类。 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">

【讨论】：