How to strike through input text when checkbox is ticked? - html

Question

Thanks to another user's question here I was able to strike through the text when the checkbox next to it is ticked, thanks to the following HTML and CSS:
<style>
/* Customize the label (the container) */
.container {
position: relative;
padding-left: 50px;
margin-bottom: 12px;
cursor: pointer;
color: #333;
font-size: 18px;
}
/* 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: #fff;
border: solid 2px #194263;
position: absolute;
left:0;
top:0;
margin-right: 10px;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 8px;
height: 14px;
border: solid #194263;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
margin-right: 10px;
}
/* strike through the text */
.container input:checked~.checkmark {
text-decoration: line-through
}
</style>
<label class="container">
<input type="checkbox">
<span class="checkmark"></span><br>
</label>
Now, I'd like to let a user add their own text, and still strike through it when the checkbox is ticked. Adding an input field within the span tag as follows does not work.
<label class="container">
<input type="checkbox">
<span class="checkmark"><input type="text" minlength="1" maxlength="100" size="60%" placeholder="Add an item"></span><br>
</label>
Why does this not work? What to do instead?

Answer 1

Your code has the following issue. When you write these lines of css:
.container input:checked~.checkmark {
text-decoration: line-through
}
You're not adding the text-decoration: line-through css property to the text input element you want to strike, but to the checkmark instead. Therefore, the text input element is not receiving any strike-through styles.
What I did to solve your problem was adding the styles to the text input. I did this by doing some small changes to your HTML and CSS, this is the code:
/* Customize the label (the container) */
.container {
position: relative;
padding-left: 50px;
margin-bottom: 12px;
cursor: pointer;
color: #333;
font-size: 18px;
}
/* Hide the browser's default checkbox */
.container input[type="checkbox"] {
display: none
}
/* Create a custom checkbox - using ::before */
.checkmark::before {
content: "";
height: 25px;
width: 25px;
background-color: #fff;
border: solid 2px #194263;
position: absolute;
left:0;
top:0;
margin-right: 10px;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 8px;
height: 14px;
border: solid #194263;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
margin-right: 10px;
}
/* strike through the text */
.container input:checked ~ input {
text-decoration: line-through
}
<label class="container">
<input type="checkbox">
<input type="text" minlength="1" maxlength="100" size="60%" placeholder="Add an item">
<span class="checkmark"></span>
<br>
</label>
And this is the result: