Changing an element's opacity after checking a box

I am making a web app similar to reminders app on iphone and I want to integrate a feature that turns the opacity of a task down if it’s marked as completed.

Here’s my current HTML:

import "bootstrap/dist/css/bootstrap.css";
import "./TaskList.css"

function TaskList() {
  return (
    <div className="card rounded-0">
      <div className="row g-0">
        <div className="col-md-8 d-flex column align-items-center task">
          <label class="custom-checkbox">
            <input type="checkbox"></input>
            <span class="checkmark"></span>
          </label>
          <div className="card-body task-body">
            <h5 className="card-title">Task #1</h5>
            <p className="card-text">This is a standard task.</p>
            <p className="card-text">
              <small className="text-body-secondary">Due Date: </small>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default TaskList;

And my CSS Code:

input[type="checkbox"]{
  opacity: 0;
}

.custom-checkbox {
  width: 40px;
  height: 27px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox .checkmark:hover{
  background-color: whitesmoke;
}

.custom-checkbox .checkmark{
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 3px;
  background: white;
}

.custom-checkbox input:checked + .checkmark{
  background: url(check2.svg) center/100%;
}

.task{
  border-bottom: 1px solid black;
  width: 100%;
}

.task-body{
  opacity: 1;
}

.custom-checkbox input:checked ~ .task-body{
  opacity: 0.5;
}

The opacity won’t go to 0.5 after the checkbox has been checked. What’s causing the issue?

I tried multiple times to create a new class to put the element under and that didn’t fix my issue. All help is appreciated. Thank you!

>Solution :

I think you’ll want to change that last CSS selector to:
.custom-checkbox:has(input:checked) ~ .task-body

This way you’re targeting the element with a class named .task-body that follows (~) an element with a class named .custom-checkbox that :has a :checked input element.