CODEWITHSUNDEEP
css
egwene sedai
egwene sedai

Reputation: 433

css: strike out text based on input

To display a task list where the entries with ticked checkbox are strikethrough, where the html is provided by an app (ia writer) and not changeable by the user, how to select the item in css? e.g. for the example below, test checked should be strikethrough, while testing is to be left as-is.

input:checked~.task-list-item {
  text-decoration: line-through
}
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox" disabled="" checked="">
test checked
</li>

<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox" disabled="">
testing
</li>

Upvotes: 0

Views: 246

Answers (1)

John
John

Reputation: 5335

Are you able to use labels for the checkboxes? You can do it like this:

input:checked + label {
  text-decoration: line-through;
}
<li class="task-list-item">
<input type="checkbox"  name="box1" class="task-list-item-checkbox" disabled="" checked="" >
<label for="box1">test checked</label>
</li>

<li class="task-list-item">
<input type="checkbox" name="box2" class="task-list-item-checkbox" disabled="">
<label for="box2">testing</label>
</li>

Edit: Here is the jS solution:

var cboxs = document.getElementsByClassName("task-list-item-checkbox");
    for(var i = 0; i < cboxs.length; i++){
   
       if (cboxs[i].checked) {
            cboxs[i].closest(".task-list-item").style.textDecoration = "line-through";  
        }
    }
<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox" disabled="" checked="">
test checked
</li>

<li class="task-list-item">
<input type="checkbox" class="task-list-item-checkbox" disabled="">
testing
</li>

Upvotes: 2

Related Questions