Home > OS >  How can I change the background color of certain div when clicking on a checkbox with css only?
How can I change the background color of certain div when clicking on a checkbox with css only?

Time:07-07

I want to change the innerCircle's background-color when clicking a checkbox with css only. How can I access the innerCircle div?

<section>

      <label  for="select1">
          <input id="select1" type="checkbox">
          <span ></span>
      </label>

      <div >

          <div id='chh' >

              <div ></div>
          </div>

          <div >

              <div ></div>
              <div ></div>


              <div ></div>
              <div ></div>


              <div ></div>

              <div ></div>



          </div>

      </div>
  </section>

CodePudding user response:

move your wanted element after that checkbox and you can get access by css pseudo element like this example

//Css part

input:checked ~ .innerCircle {
    background: red;
}

//Html part

<section>

  <label  for="select1">
      <input id="select1" type="checkbox">
      <span ></span>
      <div id="chh" >
          <div ></div>
      </div>
  </label>

  <div >
      <div >

          <div ></div>
          <div ></div>


          <div ></div>
          <div ></div>


          <div ></div>

          <div ></div>
      </div>
  </div>
</section>

CodePudding user response:

As others mentioned, with your current html order that's impossible with css. You need to put the checkboxes before your target elements in html (upper from them).

Here's an example(width css): but I don't recommend you to code like this, try doing it with js it's way better

.outerCircle {
  display: flex;
  flex-direction: column;
  background: darkgrey;
  width: 100%;
  height: 500px;
}
.innerCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
  width: inherit;
  height: 300px;
}
.catBody {
  background: darkblue;
  width: inherit;
  height: 300px;
}
.sun {
  background: yellow;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

/* moves all checkboxes to bottom of the page to make it look better*/
#innerCircleColor,
#catBodyColor,
#sunColor {
  position: fixed;
  /* margin from bottom of page */
  bottom: 10px;
}
#innerCircleColor {
  /* margin from left of page */
  left: 0;
}
#catBodyColor {
  /* margin from left of page */
  left: 100px;
}
#sunColor {
  /* margin from left of page */
  left: 190px;
}
/* moves all checkboxes to the bottom of page to make it look better*/

/* adding label to each checkbox to know which element it belongs */
#innerCircleColor::after {
  content: "inner circle";
  position: absolute;
  left: 20px;
  white-space: nowrap;
}
#catBodyColor::after {
  content: "cat body";
  position: absolute;
  left: 20px;
  white-space: nowrap;
}
#sunColor::after {
  content: "sunColor";
  position: absolute;
  left: 20px;
  white-space: nowrap;
}
/* adding label to each checkbox to know which element it belongs */

/* changes background color of each element when its checkbox is checked */

/* selector (~) only selects the elements that are placed after our checkboxes and are in the same parent(it cant select their children).
for example if you try s.th like this #catBodyColor:checked~.neck it won't        work! */
#innerCircleColor:checked~.innerCircle {
  background: green;
}
#catBodyColor:checked~.catBody {
  background: darkgreen;
}
#sunColor:checked~.sun {
  background: yellowgreen;
}
/* changes background color of each element when its checkbox is checked */
<section>
  <div >
    <!-- attention how the checkboxes are placed upper from target elements -->
    <input id="innerCircleColor" type="checkbox" />
    <input id="catBodyColor" type="checkbox" />
    <!-- attention how the checkboxes are placed upper from target elements -->

    <div id="chh" >
      <input id="sunColor" type="checkbox" />
      <div ></div>
    </div>

    <div >
      <div ></div>
      <div ></div>

      <div ></div>
      <div ></div>

      <div ></div>

      <div ></div>
    </div>
  </div>
</section>

Here's the example with js :

// selects the checkboxes
const innerCircleCheckbox = document.querySelector('#innerCircleColor');
const catBodyCheckbox = document.getElementById('catBodyColor');
const sunCheckbox = document.getElementById('sunColor');

// selects the elements
const innerCircle = document.querySelector('.innerCircle');
const catBody = document.querySelector('.catBody');
const sun = document.querySelector('.sun');

// this part runs every time the checkbox changes
innerCircleCheckbox.addEventListener('change', () => {
  // checks if the checkbox is checked and ...
  if (innerCircleCheckbox.checked) {
    // changes the color of the wanted element
    innerCircle.style.background = 'green';
  }
  // checks if the checkbox is not checked and ...
  else {
    // removes the style to revert color of element to its default color
    innerCircle.removeAttribute('style');
  }
});
catBodyCheckbox.addEventListener('change', () => {
  if (catBodyCheckbox.checked) {
    catBody.style.background = 'darkgreen';

  } else {
    catBody.removeAttribute('style');
  }
});
sunCheckbox.addEventListener('change', () => {
  if (sunCheckbox.checked) {
    sun.style.background = 'yellowgreen';

  } else {
    sun.removeAttribute('style');
  }
});
.outerCircle {
  width: 100%;
}

.innerCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
  width: inherit;
  height: 300px;
}

.catBody {
  background: darkblue;
  width: inherit;
  height: 300px;
}

.sun {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.container {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  margin: 0 25%;
  border-radius: 10px;
  color:white;
}
<section>
  <div >
    <div id="chh" >
      <div ></div>
    </div>

    <div >
      <div ></div>
      <div ></div>

      <div ></div>
      <div ></div>

      <div ></div>

      <div ></div>
    </div>
  </div>
</section>

<div >
  <label  for="innerCircleColor">
        <input id="innerCircleColor" type="checkbox" />
        <span >inner circle</span>
      </label>

  <label  for="catBodyColor">
        <input id="catBodyColor" type="checkbox" />
        <span >cat body</span>
      </label>

  <label  for="sunColor">
        <input id="sunColor" type="checkbox" />
        <span >sun</span>
      </label>
</div>

  • Related