html - 输入聚焦时不显示 Span

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;
}

完整代码链接:

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

Answer 1

将您的 <span>在<input>之后字段。

做:

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

代替:

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

希望这对您有所帮助!