效果预览
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,其他的还可以加入大小变化,颜色的过渡等等。。