Hidden conditional fields using only html and css in a form

HTML-CSS
1

Hi, I’m trying to create a form with hidden fields to pop up when a checkbox is checked. I want to have a how “How many?” field pop up if a pet type is selected. It only seems to work when “Cat” is selected, but not any other animals. Can anybody tell me what is wrong in my code? I would greatly appreciate it, it’s driving me crazy. Below is the link to my survey.

https://codepen.io/mitzic42/pen/OJRQLQJ

2

In short: ~ matches all .conditional elements after #foo:not(:checked).
Solution would be to wrap groups in e.g. <div>

3

Or to use the + selector instead of ~:

<label for="input-1-a">input 1</label>
<input class="first-input" id="input-1-a" type="checkbox">

<label class="hidden"><input id="input-1-b" type="checkbox">hidden-1</label>



<label for="input-2-a">input 2</label>
<input class="first-input" id="input-2-a" type="checkbox">

<label class="hidden"><input id="input-2-b" type="checkbox">hidden-2</label>

Then one CSS rule for all inputs:

.hidden {
  display:none;
}
.first-input:checked + .hidden {
  display:block;
}
4

Hi, a very belated thank you, 2 months later. My brain was exploding from this, so I stepped away and moved on to my 3rd webpage, before trying to wrap my head around your answer. So, I finished my 3rd page, and came back to your answer and my 2nd page with a fresh mind. And, you were right, it’s all about the divs! It worked, and I’m so happy. So, thanks again, sorry for the delayed reply. I am happy to unveil my cleaned up page, thanks to you! Here is the result of your magic answer if you want to see: https://codepen.io/mitzic42/full/NWdWVjM :smiley:

5

Hello, a very belated thank you for your answer. Your answer, in combination with the answer from jenovs, helped me. I used the tilda, but in the format of your answer, and it worked! Your format simplified the gobbledy-goop that I had there before. I also needed to add divs, like jenovs said. So, the both of you, together, have helped me (after I was able to clear my head to try your responses out). Thank you, You’re both awesome! Here is my result, if you want to check it out: https://codepen.io/mitzic42/full/NWdWVjM :smiley:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.