:checked not working when input tag is inside label tag CSS

Question

I am able to get this code to work:

[data-field-name="HideAndShow"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] {
  opacity: 1 !important;
  max-height: 100px !important;
  overflow: visible !important;
  display: block !important;
}

<input id="UniqueCheckbox" type="checkbox">
<label>Click to show</label>
    
<div data-field-name="HideAndShow">
  Hide and Show This
</div>

In the application I am trying to style it has the input inside the label and I cannot get it to work:

[data-field-name="HideAndShow"] {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] {
  opacity: 1 !important;
  max-height: 100px !important;
  overflow: visible !important;
  display: block !important;
}

<label><input id="UniqueCheckbox" type="checkbox">Click to show</label>
    
<div data-field-name="HideAndShow">
  Hide and Show This
</div>

The application I am styling is very locked down and I cannot change it. Is there a way around this with the HTML structure locked in place? Ideally using only CSS.

Edit

I'm happy to consider jquery solutions.

Thank you,

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — epascarello, Jun 07 '16 at 02:28
You use a sibling selector and there is no sibling to the input. And there is no standard way to have a parent selector as the link shows. — epascarello, Jun 07 '16 at 02:54

SSS · Accepted Answer · 2016-06-07T04:35:22.913

Worked it out with jquery if anyone is interested:

 
$(document).ready(function(){
    $("#UniqueCheckbox").click(function(){
  if ( typeof hidden === 'undefined' || hidden == true ) {
      $(document.querySelectorAll('[data-field-name="HideAndShow"]')).show(100); 
      hidden = false;
    } 
 else {
      $(document.querySelectorAll('[data-field-name="HideAndShow"]')).hide(100); 
      hidden = true;
  }
      });  
});

[data-field-name="HideAndShow"] {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>


<label><input id="UniqueCheckbox" type="checkbox">Click to show</label>
    
<div style="" data-field-name="HideAndShow">
  Show and Hide This
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:08

The problem is the ~ selector. See W3C

~ selects the element immediately after the previous argument. So when you have the HTML in the first example it works because it looks for that data-name property in an element immediately after the #UniqueCheckbox

After playing around with your code for a bit, there is no easy way to do this using pure CSS(that I can see), even with transitions. The way the HTML is nested is just too weird to target using CSS ... Actually, it's not too hard to target - but using the :checked pseudo class as a trigger event to change the other div, is, in this case, very strange to do. In other examples (like dropdowns) , when using a psuedoclass as a trigger, you'll see that the triggered elements are usually inside that element which calls the psuedo class ..

Look at this dropdown menu example and pay attention to how the nav li:hover ul works along with how the HTML is structured in order to work

I would recommend a simple click handler using jQuery ala this

Hmm I can't work out how to put that in place with a checkbox. I don't have asp just html, css, javascript, jquery. What would the code be? — SSS, Jun 07 '16 at 03:09

:checked not working when input tag is inside label tag CSS

2 Answers2