What I'm trying to do is reveal and hide a div when the label + checkbox is checked. (CSS only)
So if [Sign Up] is clicked (checked). Hide itself(div.remove-check) and reveal the hidden input (div#email). I thought the code I had would be good enough, but it isn't. What am I doing wrong?
My code:
Html:
<div class="remove-check">
<label for="reveal-email" class="btn" style="width: 300px"><input type="checkbox" id="reveal-email" role="button" />Sign Up</label>
</div>
<br>
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn" >Apply</a>
</form>
</div>
CSS:
input[type=checkbox]{
visibility: hidden;
}
input[type=checkbox]:checked ~ .remove-check{
display: none;
}
input[type=checkbox]:checked ~ #email{
display: block;
}
#email{
display: none;
}
Here's a fiddle to show you what I'm working with.
Thank you for your help in advance.
Currently there are no parent selectors in CSS, which is why that code doesn't work. The checkbox must be on the same level as div in question. Is there a CSS parent selector?
You can take it out of the label to put them on the same plane like shown here.
This example should work:
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~.remove-check {
display: none;
}
input[type=checkbox]:checked~#email {
display: block;
}
#email {
display: none;
}
/* ------ Just styles ------ */
input[type=text] {
width: 225px;
padding: 12px 14px;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
line-height: 1;
color: #222222;
}
.btn {
width: auto;
background: #2ba6cb;
border: 1px solid #1e728c;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
color: white;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 10px 20px 11px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.btn:hover {
background: #006582;
}
<label for="reveal-email" class="btn" style="width: 300px"> Sign Up</label>
<input type="checkbox" id="reveal-email" role="button">
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn">Apply</a>
</form>
</div>
View on JSFiddle
The ~
CSS selector is called the General Sibling Selector. It only selects siblings of the preceding selector (not parents or aunts/uncles).
For example:
input[type=checkbox]:checked ~ .remove-check {
display: none;
}
Means:
For any checkboxes that are checked, hide any siblings (elements at the same level in the heirarchy) that have the class remove-check.
There are currently no CSS selectors that apply styles up the chain to the parents.
You will have to either make the checkbox a sibling of the email div or use some non-CSS method (like JavaScript) to do what you want.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With