将删除线添加到选中的复选框 [英] Add strikethrough to checked checkbox

问题描述

当我在表单(Bootstrap v3)中选中一个复选框时，我试图添加删除线.我将此代码编码为 bootply :

I am trying to add strikethrough when i select a checkbox in my form (Bootstrap v3). I coded this 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中添加了一个类

and added a class in css

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

但是它不起作用.

推荐答案

以下是在检查输入内容时删除警告的解决方案:

Here is a solution to put a strike through when your input is checked:

HTML:

<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" value="1"/>
             <label class="strikethrough">sssssssss</label>
        </div>
     </div>
</div>

CSS

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

JSFIDDLE

使用此解决方案时，只要选中此复选框，它就会对标签产生作用.因此您可以根据需要将其设置为粗体或更改其颜色.

With this solution when ever the checkbox is checked it will do something to the label. so you could make it bold or change its colour if you wanted.

这篇关于将删除线添加到选中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！