Question 335050 in Html Question posted in
Some basic documentation can be found here.

Html – 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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    You could useState to do this. Looks like this is a React component, so why not allow the component state to update the styling?

    function TaskList() {
  // Create your components state here
  const [checked, setChecked] = React.useState(false)
  
  // This function allows your checkbox state
  // to update your component's state
  const handleCheck = (e) => {
    setChecked(e.target.checked)
  }
  
  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">
            
            {/* 
               Attach your handleCheck function to your checkbox 
             */}
            <input type="checkbox" onChange={handleCheck}></input>
            <span class="checkmark"></span>
          </label>
         
          <div className={`card-body task-body${checked ? ' complete' : ''}`}>
            <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>
  );
}

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<TaskList/>)
    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;
}

.complete {
  opacity: 0.5;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search