[ css ] 实现漂亮的输入框动画（借鉴自panjiachen的后台管理项目）

效果预览

---

 

 

 

HTML

---

<div class="l-custom-input">
    <input size="large" id="l-input" />
    <label for="l-input">Title</label>
</div>

 

css

---

.l-custom-input{
  position: relative;
  margin-top: 40px;
  margin-bottom: 40px;
}
.l-custom-input label {
  position: absolute;
  left:0;
  bottom:0;
  font-size:18px;
  font-weight: 400;
  color: #9e9e9e;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
  transition: bottom .2s;
}
#l-input{
    border: none;
    width: 100%;
    display: block;
    padding: 12px 12px 2px 6px;
    font-size: 16px;
    background: none;
    color: #000;
    text-indent: 0;
    border-bottom: 1px solid #e0e0e0;
}
#l-input:focus {
    outline: none;
    border-bottom: 1px solid #2196f3;

}
#l-input:focus+label {
  bottom:30px;
  color:#2196f3;

}

 

总结

---

 

 1. 

#l-input:focus+label 实现兄弟选择器，只能选择自己之后的兄弟

2.

<label for="l-input"> 用来绑定Title和Input，点击Title的时候也能实现选中input框

 3. 动画至加了bottom 和 color，其他的还可以加入大小变化，颜色的过渡等等。。

 

4. 存在的问题，输入文字后Title还是会掉下来，待解决