[ 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還是會掉下來，待解決