html - 单独的复选框图像替换

标签 html css checkbox

我希望尝试以下链接中的内容,但是我希望每个复选框都有不同的图像。有什么办法可以做到这一点吗?我尝试为每个元素设置不同的类,然后将类添加到复选框,但这似乎不起作用......默认复选框保持不变。

我的尝试: 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/

相关文章:

javascript - 创建一个复选框,用于注释 CSS 行

javascript - anchor 击行为中的复选框

html - 如何使用 CSS 在 BR 标签后添加 em 空格 ( )

javascript - 如何将 border-left none 赋予列表的第一个可见子项?

css - flexbox 每行元素数量相等?

php - 将面包屑 php 添加到我的 Bootstrap 导航栏

html - 我怎样才能将 bootstrap 4 下拉菜单向左对齐并扩展到全长

javascript - 使用具有特定 id 的 jquery 提交表单

css - 如何在 ngRepeat 元素上使用 ngAnimate?

java - ListView Viewholder 复选框状态