frempong69 frempong69 - 13 days ago 6
CSS Question

Span not showing when input is focused

.email-input-container>span{
background-color: red;
position: absolute;
left: 10px;
transform: translateY(-20px);
opacity: 0;
transition: all 0.3s ease;
}



input:focus + span{
opacity: 1;
}


Link to complete code here:

http://codepen.io/Drew69/pen/gLgvxJ

Answer

Place your <span> after the <input> field.

Do:

<div class="email-input-container">
  <input type="email" placeholder="Email">
  <span>Email</span>
</div>

Instead of:

<div class="email-input-container">
    <span>Email</span>
  <input type="email" placeholder="Email">
</div>

Hope this helps!

Comments