css - 为选中的复选框添加删除线

Question

当我在我的表单中选择一个复选框时，我试图添加删除线 (Bootstrap v3)。我编码了这个 bootply :

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
             <label><input type="checkbox" name="packersOff" class="strikethrough" value="1">sssssssss</label>
        </div>
     </div>
</div>

并在css中添加了一个类

.strikethrough:checked{
  text-decoration:line-through;
}

但它不起作用..

Answer 1

这里有一个解决方案，可以在检查您的输入时删除删除线:

input[type=checkbox]:checked + label.strikethrough{
  text-decoration: line-through;
}

<div class="form-group ">
    <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
        <div class="checkbox">
            <input type="checkbox" name="packersOff" id="packers" value="1"/>
            <label for="packers" class="strikethrough">sssssssss</label>
        </div>
     </div>
</div>

JSFIDDLE

有了这个解决方案，每当复选框被选中时，它都会对标签做一些事情。因此您可以根据需要将其设为粗体或更改其颜色。