Forked from Chris Coyier's Pen Reveal Form Fields as Needed with CSS :checked.
A Pen by Captain Anonymous on CodePen.
<form method="post" action="#"> | |
<h4>Which do you like more?</h4> | |
<div> | |
<div> | |
<input type="radio" name="choice-animals" id="choice-animals-dogs" required> | |
<label for="choice-animals-dogs">I like dogs more</label> | |
<div class="reveal-if-active"> | |
<label for="which-dog">Good call. What's the name of your favorite dog?</label> | |
<input type="text" id="which-dog" name="which-dog" class="require-if-active" data-require-pair="#choice-animals-dogs"> | |
</div> | |
</div> | |
<div> | |
<input type="radio" name="choice-animals" id="choice-animals-cats"> | |
<label for="choice-animals-cats">I like cats more</label> | |
<div class="reveal-if-active"> | |
<label for="which-cat">Why? Cats are weird. Respond.</label> | |
<input type="text" id="which-cat" name="which-cat" class="require-if-active" data-require-pair="#choice-animals-cats"> | |
</div> | |
</div> | |
</div> | |
<h4>Would you like a dollar?</h4> | |
<div> | |
<input type="checkbox" name="choice-dollar" id="choice-dollar"> | |
<label for="choice-dollar">Sure.</label> | |
<div class="reveal-if-active"> | |
Wouldn't we all. | |
</div> | |
</div> | |
<div> | |
<input type="submit" value="Submit"> | |
</div> | |
</form> |
Forked from Chris Coyier's Pen Reveal Form Fields as Needed with CSS :checked.
A Pen by Captain Anonymous on CodePen.
.reveal-if-active { | |
opacity: 0; | |
max-height: 0; | |
overflow: hidden; | |
font-size: 16px; | |
transform: scale(0.8); | |
transition: 0.5s; | |
label { | |
display: block; | |
margin: 0 0 3px 0; | |
} | |
input[type=text] { | |
width: 100%; | |
} | |
input[type="radio"]:checked ~ &, | |
input[type="checkbox"]:checked ~ & { | |
opacity: 1; | |
max-height: 100px; | |
padding: 10px 20px; | |
transform: scale(1); | |
overflow: visible; | |
} | |
} | |
form { | |
max-width: 500px; | |
margin: 20px auto; | |
> div { | |
margin: 0 0 20px 0; | |
label { | |
font-weight: bold; | |
} | |
> div { | |
padding: 5px; | |
} | |
} | |
> h4 { | |
color: green; | |
font-size: 24px; | |
margin: 0 0 10px 0; | |
border-bottom: 2px solid green; | |
} | |
} | |
body { | |
font-size: 20px; | |
} | |
* { | |
box-sizing: border-box; | |
} |