css - tachar - Añadir tachado a la casilla marcada

tachado css color

Question

Estoy intentando agregar tachado cuando selecciono una casilla de verificación en mi formulario (Bootstrap v3). Codifiqué esta 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>

y agregó una clase en css

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

pero no funciona ..

Answer 1

El selector de :checked CSS :checked representa cualquier radio ( <input type="radio"> ), casilla de verificación ( <input type="checkbox"> ) u opción ( <option> en un elemento <select> ) que está marcada o conmutado a un estado activado. El usuario puede cambiar este estado haciendo clic en el elemento o seleccionando un valor diferente, en cuyo caso la pseudo-clase: checked ya no se aplica a este elemento, sino que se aplicará al correspondiente.

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

Para que funcione, reorganice su HTML para:

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

Y tu CSS para:

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

DEMO .

Answer 2

Aquí hay una solución para iniciar un ataque cuando se verifica su entrada:

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

Con esta solución, cuando la casilla esté marcada, le hará algo a la etiqueta. para que puedas en negrita o cambiar su color si lo deseas.

Answer 3

El problema es que está tratando de aplicar line-through en casillas donde el texto está dentro de la etiqueta. Puede ajustar el texto dentro de un <span> y modificar su 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

Answer 4

Solución 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>

Answer 5

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

Answer 6

Esto funcionó para mí.

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