我希望尝试以下链接中的内容,但是我希望每个复选框都有不同的图像。有什么办法可以做到这一点吗?我尝试为每个元素设置不同的类,然后将类添加到复选框,但这似乎不起作用......默认复选框保持不变。
我的尝试: https://jsfiddle.net/9qjj7012/
<div class="AccordionPanel" id="acc-step-3">
<div class="AccordionPanelTab">Step Three - Equipment Package</div>
<div class="AccordionPanelContent">
<div class="">
<input type="checkbox" name="equipment" value="speakers" id="equipment_0" class="speaker">
<input type="checkbox" name="equipment" value="subwoofer" id="equipment_1" class="subwoofer">
<input type="checkbox" name="equipment" value="smoke-machine" id="equipment_2" class="smokemachine">
<input type="checkbox" name="equipment" value="moving-head" id="equipment_3" class="movinghead">
</div>
<div class="form-gap"></div>
<input name="previous" id="acc-step-prev-3" type="button" class="form-btn form-prev" value="Previous">
<input name="next" id="acc-step-next-3" type="button" class="form-btn form-next" value="Next"><br>
<input name="reset" type="reset" class="form-btn form-reset" value="Reset">
</div>
</div>
我想要的结果示例: http://codepen.io/jointmedias/pen/HqCJe (每个复选框都有单独的图像除外)
新JSFIDDLE:https://jsfiddle.net/9qjj7012/
最佳答案
你做错的是,你为复选框分配了一个类,而你引用的示例中的CSS规则没有选择复选框,而是选择了标签。该复选框实际上是隐藏的,它是您看到的标签。
看看这个: http://codepen.io/DavidvanDriessche/pen/xVwJgd
在此示例中,标签具有不同的类,CSS 规则按如下方式执行:
对于所有复选框:
input[type=checkbox] {
display: none;
}
对于复选框后面具有类 background1 的所有标签:
input[type=checkbox] + label.background1 {
background: url("http://www.corporatecomplianceinsights.com/wp-content/uploads/2013/06/Facebook-thumbs-up.jpg") no-repeat;
}
对于复选框后面具有类 background2 的所有标签
input[type=checkbox] + label.background2 {
background: url("http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.med.png") no-repeat;
}
对于具有以“background”开头且位于复选框后面的类属性的所有标签:
input[type=checkbox] + label[class*="background"] {
background-size: 50%;
height: 250px;
width: 250px;
display: inline-block;
padding: 0 0 0 0px;
}
我使用最后一条规则的唯一原因是它允许您将所有常见的格式化代码放入一个 CSS 规则中,并且您不必为针对特定背景类的每个规则重复它,但如果你愿意的话,你可以放弃这一点。
关于html - 单独的复选框图像替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35811146/