Applying a :checked on a parent div by clicking on the daughter div

Asked

Viewed 181 times

-1

I need to leave menu checkbox as in the image but my background is in the father div and my checkbox is a div son how can I apply that background in a div father cleaving into a div son

inserir a descrição da imagem aqui

HTML:

<div class="bg-checkbox-dynamic -gray-light">
                                                            <div class="custom-controls-stacked d-block my-3">
                                                                <label class="custom-control custom-ctr material-checkbox">
                                                                    Link 1
                                                                    <input type="checkbox" class="material-control-input">
                                                                    <span class="material-control-indicator"></span>
                                                                </label>
                                                            </div>
                                                        </div>

Css:

.bg-checkbox-dynamic{
  background-color: $gray-dark;
  padding: 1px 15px;
  @include border-radius(15px);

}

input[type="checkbox"]:checked ~ .bg-checkbox-dynamic{
  background-color:lime!important;
  color:white
}
css html5
  • 1

    Only with Javascript you will be able to access a parent through the child. CSS does the opposite, selects child, sibling and adjacent elements.

  • @Sam How would that look ?

  • 1

    You don’t need JS, da to do it with CSS, but not the way you’re thinking, da to do it with pseudo element, or simply put the checkbox before the parent, since it will be activated by clicking on the label, and not on the checkbox itself

  • @hugocsl so I can’t put the checkbox before because it messes everything up because I’m styling it the idea is to leave in the structure I set up how the css would look then

1 answer

1

In this structure there is no way to do this. CSS does not access parent elements through a descendant (child element). It would have to use Javascript:

let boxes = document.querySelectorAll('input[type="checkbox"]');
for(let i of boxes){
   i.onclick = function(){
      
      let pai = this.parentNode.parentNode.parentNode;
      
      if(this.checked){
         pai.style.backgroundColor = "lime";
         pai.style.color = "white";
      }else{
         pai.style.backgroundColor = "white";
         pai.style.color = "black";
      }
      
   }
}
.bg-checkbox-dynamic{
  background-color: gray;
  padding: 1px 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div class="bg-checkbox-dynamic -gray-light">
   <div class="custom-controls-stacked d-block my-3">
       <label class="custom-control custom-ctr material-checkbox">
           Link 1
           <input type="checkbox" class="material-control-input">
           <span class="material-control-indicator"></span>
       </label>
   </div>
</div>

See what I used .parentNode 3 times to get to the div that will be changed. That’s because the checkbox is on the 3rd level within that div. But you can use the method .closest() if you want to. The problem is that this method does not work in slightly older browsers. The advantage of this is that, no matter the level of the element, it will fetch a parent element directly through a selector (class, id, attribute etc.):

let boxes = document.querySelectorAll('input[type="checkbox"]');
for(let i of boxes){
   i.onclick = function(){
      
      let pai = this.closest(".bg-checkbox-dynamic");
      
      if(this.checked){
         pai.style.backgroundColor = "lime";
         pai.style.color = "white";
      }else{
         pai.style.backgroundColor = "white";
         pai.style.color = "black";
      }
      
   }
}
.bg-checkbox-dynamic{
  background-color: gray-dark;
  padding: 1px 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div class="bg-checkbox-dynamic -gray-light">
   <div class="custom-controls-stacked d-block my-3">
       <label class="custom-control custom-ctr material-checkbox">
           Link 1
           <input type="checkbox" class="material-control-input">
           <span class="material-control-indicator"></span>
       </label>
   </div>
</div>

  • Wonder worked however the color that has to appear when selecting would have to be a gradient is possible ?

  • It is possible, just exchange "Lime" for the fund you want. You may have to change the property too.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.