Question 263002 in CSS Question posted in
Some basic documentation can be found here.

How to change background color of checkbox in css

I have one checkbox inside div. The div class name is main.I am trying to set the background color to main classname when i checked the checkbox. But not able to set background color to .main classname.

If i checked the checkbox it will be look like below.
enter image description here

If i unchecked the checkbox it will be look like below.

enter image description here

HTML:

 <div class="main"> 
 <input type="checkbox" id="maincheck">{{item.title}}
 </div>

CSS:

.main input[id='maincheck']:checked:after{
  background-color: #ccc;
}

How to achieve using CSS? Demo: https://stackblitz.com/edit/angular-checkbox-example-mhvnkb?file=app%2Fapp.component.html

Tags:

2

Answers


  1. 0

    Sounds like you want to change the background colour of the checkbox’s parent element. This can be rephrased as ‘if .main contains a checked checkbox then…‘. In CSS you could use the :has() pseudo-class to select an element that has a certain child:

    .main:has(input[id='maincheck']:checked) {
  background-color: #ccc;
}
    <div class="main">
  <input type="checkbox" id="maincheck">item title
</div>

    But note that at the time of writing this is NOT yet supported in Firefox. (See https://caniuse.com/css-has)

    An alternative would be to move the checkbox to before its parent. Then you can use the next-sibling combinator (+) to select the div that directly follows a checked checkbox:

    .wrap {
  position: relative;
}

input[id='maincheck'] {
  position: absolute;
}

label[for='maincheck'] {
  margin-left: 1.5rem;
}

input[id='maincheck']:checked+.main {
  background-color: #ccc;
}
    <div class="wrap">
  <input type="checkbox" id="maincheck" />
  <div class="main">
    <label for="maincheck">item title</label>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can’t directly change the parent element’s style using only CSS, so you’d have to use JavaScript or jQuery.

    Here’s a JavaScript approach:

    document.addEventListener('DOMContentLoaded', function() {
  // Grab the checkbox element
  const checkBox = document.getElementById("maincheck");

  // Grab the main div
  const mainDiv = document.querySelector(".main");

  // Add an event listener for checkbox changes
  checkBox.addEventListener("change", function() {
    if (this.checked) {
      // If checked, add the 'checked' class to the main div
      mainDiv.classList.add("checked");
    } else {
      // If unchecked, remove the 'checked' class from the main div
      mainDiv.classList.remove("checked");
    }
  });
});
    .main {
  /* Default background color */
  background-color: transparent;
}

.main.checked {
  /* Background color when checkbox is checked */
  background-color: #ccc;
}
    <div class="main"> 
  <input type="checkbox" id="maincheck">Item Title
</div>

    when you check the checkbox, the background colour of the .main div will change to #ccc, and when you uncheck it, the background will revert to transparent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search