Span not showing when input is focused

Question

 .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

http://stackoverflow.com/a/38236688/3597276 (see section below code in this answer) — Michael Benjamin, Nov 19 '16 at 17:26

score 1 · Accepted Answer · answered Nov 19 '16 at 17:28

1

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!

answered Nov 19 '16 at 17:28

Saurav Rastogi

9,575
3
29
41

@frempong69 Please accept this answer if it really helped you. – Saurav Rastogi Nov 19 '16 at 18:08

score 0 · Answer 2 · answered Nov 19 '16 at 17:27

0

you have given your span opacity: 0, so it doesn't shows up.

the + selector applies to elements after the called element. see here:

http://www.w3schools.com/cssref/sel_element_pluss.asp

answered Nov 19 '16 at 17:27

elicohenator

747
6
17

score 0 · Answer 3 · answered Nov 19 '16 at 17:27

0

you specified + which mean input and then span like this

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

answered Nov 19 '16 at 17:27

raam86

6,785
2
31
46

Span not showing when input is focused

3 Answers3