Well, I'd like to know how I can make a display div when I'm focusing on the input code ex
//CSS
.email:focus > div.oculta{
display:none;
}
//HTML
<div class="form">
<input type="text" class="email" name="email" placeholder="email" />
</div>
<div class="oculta">
<!-- Isso Aqui terá que ficar display none a partir do focus na input form -->
teste
</div>
How can I make this work?
Your CSS selector is applying display: none to a div.oculta child of a .email:focus . In your HTML, div.oculta will not be affected since it is not a child of .email:focus .
In this way, you could make it work: using the ~ or + selector, which selects the following elements:
.email:focus + div.oculta{
display:none;
}
<div class="form">
<input type="text" class="email" name="asdasd" placeholder="email" />
<div class="oculta">
teste
</div>
</div>
If you want to hide div.oculta with HTML in this way, you can not use CSS selectors to reach it from .email:focus . Therefore, you will need a JavaScript onFocus event bound to the element. For example:
document.querySelector('.email').onfocus = function() {
document.querySelector('.oculta').style.display = "none";
}
document.querySelector('.email').onfocusout = function() {
document.querySelector('.oculta').style.display = "block";
}