-2

Is this impossible? I've created a responsive menu system, but the :checked event of my checkbox doesn't get caught in my css

CSS

#sectiona:checked + #asection {
    display: block;
}

HTML

<li >
    <label for="sectiona" class="showhide">Search for a term</label>
    <input type="checkbox" id="sectiona" value="button" style="display:none;"/>                   
</li>

I've see something like this before. If this isn't possible, I'll have to redesign my menus. It has to be HTML and CSS. No Javascript is allowed...

Puneet
  • 470
  • 5
  • 17
Paul Long
  • 1
  • 3
  • 3
    Where is this `#asection`? – zmuci Mar 08 '18 at 09:39
  • Your given code example you should try this selector `li + #sectiona:checked` – ochs.tobi Mar 08 '18 at 09:46
  • use js, if understood correctly not possible with just css – Ylama Mar 08 '18 at 09:53
  • I've now removed the
      and i'm working on getting the :checked recognized by the CSS. As I've said in other comments, I've inspected the checkbox, and it seems to be changing...
     – Paul Long Mar 08 '18 at 10:48
  • What I suspect you are trying to do is affect an element **outside** the `li` by clicking on the `label/input`...this is **not possible** with CSS. – Paulie_D Mar 08 '18 at 12:45

1 Answers1

0

If undersood correctly you trying to show/hide checkbox input based on label click.

the visibility could do the trick.

Css: 

input#sectiona:checked  {
   visibility: visible;
}

input#sectiona {
 visibility: hidden;
}
<li >
<label for="sectiona" class="showhide">Search for a term</label>
<input type="checkbox" id="sectiona" value="button" />                   
</li>

in that case you can also add display: block;

input#sectiona:checked  {
  visibility: visible;
  display: block;
}
Ylama
  • 2,040
  • 19
  • 44