Afficher et masquer un div sur la case à cocher état avec css
Ce que je suis en train de faire est de montrer et de cacher une div lorsque l'étiquette + case est cochée. (CSS)
Donc, si [s'inscrire] est activé (coché). Se cacher(div.retirez-check) et de révéler le caché d'entrée (div#e-mail). Je pensais que le code que j'avais assez bien, mais il ne l'est pas. Ce que je fais mal?
Mon 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;
}
Voici un violon pour vous montrer ce que je suis en train de travailler avec.
Je vous remercie pour votre aide à l'avance.
OriginalL'auteur Modelesq | 2013-09-11
Vous devez vous connecter pour publier un commentaire.
La
~
sélecteur CSS est appelé le grand Sélecteur de frères. Il ne choisit que des frères et sœurs de la précédente sélecteur (pas les parents ou les oncles/tantes).Par exemple:
Signifie:
Pour toutes les cases sont cochées, masquer tous les frères et sœurs (les éléments au même niveau dans la hiérarchie) qui ont la classe supprimer la vérification.
Il n'existe actuellement pas de sélecteurs CSS qui s'appliquent styles de la chaîne pour les parents.
Vous devrez soit faire de la case un frère ou une sœur de l'e-mail div ou d'utiliser certains non-méthode CSS (comme JavaScript) pour faire ce que vous voulez.
OriginalL'auteur zigdawgydawg