Question

我希望尝试类似下面的链接，但我希望每个复选框都有不同的图像。有没有办法做到这一点？我已经尝试为每个项目设置不同的类，只是将类添加到复选框，但这似乎不起作用...默认复选框保持不变。

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

Answer 1

您做错了，是您为复选框分配了一个类，而在您引用的示例中的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;
}

对于具有以＆＃34开头的类属性的所有标签;背景＆＃34;并且正在关注一个复选框：

input[type=checkbox] + label[class*="background"] {
  background-size: 50%;
  height: 250px;
  width: 250px;
  display: inline-block;
  padding: 0 0 0 0px;
}

我使用最后一条规则的唯一原因是它允许您将所有常见的格式代码放入一个CSS规则中，并且您不必为每个针对a的规则重复它具体的背景课程，但如果你愿意的话，你可以放弃。

Answer 2

到目前为止checkbox不支持background属性。幸运的是，复选框label也可用作指定（for=checkboxId）复选框的可点击区域。因此，我们的想法是使用label元素创建一个假复选框，然后在选中时更改它的背景值。

input { display:none; } /* hide the checkbox. Label is our clickable area */
label {                 /* define the clickable area */
    height: 150px;      
    width: 150px;
    display: inline-block;
    border: 2px solid;
}    

/* set background image of the clicked area */
input[id=speakers]:checked + label {background: url('speakers.jpg');}
input[id=subwoofer]:checked + label {background: url('subwoofer.jpg');}
input[id=smoke-machine]:checked + label {background: url('smachine.jpg'); 
}

See Demo

单个复选框图像替换

2 个答案: