CSS 将删除线添加到选中的复选框

Add strikethrough to checked checkbox

提问by yaylitzis

I am trying to add strikethrough when i select a checkbox in my form (Bootstrap v3). I coded this bootply:

当我在表单 (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>

and added a class in css

并在 css 中添加了一个类

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

but it doesn't work..

但它不起作用..

回答by Andrew

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

这是在检查您的输入时进行删除的解决方案：

HTML:

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

CSS

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

JSFIDDLE

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.

使用此解决方案时，检查复选框时，它会对标签进行操作。所以如果你愿意，你可以把它加粗或改变它的颜色。

回答by Lokesh Suthar

Problem is that you are trying to apply line-throughon checkbox where as the text is inside the label. You can wrap the text inside a <span>and alter it's CSS on :checked

问题是您正在尝试应用line-through复选框，因为文本位于标签内。您可以将文本包裹在 a 中<span>并更改它的 CSS:checked

<div class="checkbox">
   <label>
      <input type="checkbox" name="packersOff" class="strikethrough" value="1">
      <span>sssssssss</span>
   </label>
</div>




.strikethrough:checked + span{
  text-decoration:line-through
}

Bootply

引导

回答by Manoj Kumar

.strikethrough:checked + .strikeThis {
  text-decoration: line-through
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
  <label for="inputName" class="col-md-1 control-label">select</label>
  <div class="col-md-5">
   
      <input name="packersOff" class="strikethrough" value="1" type="checkbox">
      <label for="packersOff" class="strikeThis">sssssssss</label>
    
  </div>
</div>

回答by LinkinTED

The :checkedCSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option>in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

的:checkedCSS伪类选择表示任何无线电（<input type="radio">），复选框（<input type="checkbox">）或选项（<option>在一个<select>），其被选中或切换到导通状态的元素。用户可以通过单击元素或选择不同的值来更改此状态，在这种情况下 :checked 伪类不再适用于该元素，而是适用于相关元素。

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

来源：https: //developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

In order to make it work, rearrange your HTML to:

为了使其工作，请将您的 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 name="packersOff" class="strikethrough" value="1" type="checkbox">
          <label for="packersOff">sssssssss</label>
        </div>
     </div>
</div>

And your CSS to:

和你的CSS：

.strikethrough:checked + label {
  text-decoration:line-through
}

DEMO.

演示。

回答by odedta

jQuery solution:

jQuery 解决方案：

$('#packersOff').change(function() {
  if ($('#packersOff').prop('checked') ) {
    $('#test').css('text-decoration','line-through');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
 <label for="inputName" class="col-md-1 control-label">select</label>  
    <div class="col-md-5">
  <div class="checkbox">
            <label for="packersOff" id="test">sssssssss</label>
            <input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" />
        </div>
     </div>
</div>

回答by Faheem

This worked for me.

这对我有用。

li.my-item:hover span { visibility: visible; }
li.my-item span { visibility:hidden; }