CSS + HTML单选按钮 - 每个按钮都有其他img如何？ [英] CSS+HTML Radio button - every button have other img how?
本文介绍了CSS + HTML单选按钮 - 每个按钮都有其他img如何？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好我想为每个单选按钮提供其他图像而不是所有按钮的相同图像。
我该怎么做？我在很多方面尝试过，但都没有工作过。
Hello I want to have for every radio-button other image not for all button's same image. How would I do that? I tried it on many ways but none has worked yet..
我的代码只有1 img所有单选按钮是：
My code with only 1 img for all radio-button is:
<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>
感谢您的帮助！
Thanks for help!
推荐答案
我想你应该在你的初始声明之后为每个选项添加一个类名，例如：
I think you should add a class name for every option item, after your initial declarations, for example:
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如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
