Strikethrough text when checkbox checked - html

Question

Can anyone help me with this code so that when the checkbox is checked, the text has a strikethrough as well?
I can get either the strikethrough to work, or the css styling, but I cannot get both to work at the same time :(
I've tried to combine the code below with the code in the link, but I can't figure out what I'm doing wrong.
CSS checkbox strikethrough Demo
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>

Answer 1

you can do this simply using pseudo elements ::before and ::after with text-decoration: line-through
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default checkbox */
.container input {
display: none
}
/* Create a custom checkbox - using ::before */
.checkmark::before {
content: "";
height: 25px;
width: 25px;
background-color: #eee;
position: absolute;
left:0;
top:0;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark::before {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark::before {
background-color: #2196F3;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
}
/* strike throught the text */
.container input:checked~.checkmark {
text-decoration: line-through
}
<label class="container">
<input type="checkbox">
<span class="checkmark">Two</span>
</label>

Answer 2

As you have both the checkbox and the text inside the label (contrary to the example you are referencing where the label comes after the checkbox) you will have to rearrange your markup slightly.
The text you want to modify has to come after the checkbox for the sibling selectors to work (+ or ~), and (as CSS cannot select parent elements) the text has to be inside its own element.
I suggest you put it inside its own span named .text:
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<span class="text">Two</span>
</label>
You can then select the text when it is the sibling of a checked checkbox using the following:
.container input:checked ~ .text {
text-decoration: line-through;
}
Putting this into your code we get the following:
/* This is our new part*/
.container input:checked ~ .text {
text-decoration: line-through;
}
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.container input:checked ~ .checkmark:after {
display: block;
}
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<span class="text">Two</span>
</label>

Answer 3

So first create a label that text inside you want to cross, add it after checkbox and add this to css:
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
<label class="container">
<input type="checkbox"><label> Cross me </label>
<span class="checkmark"></span>
</label>