CSS如何去完成一个Google Input Style

我的medium

首先得先得确定基本的html结构， 如下：

<div class="wrapper">  
    <input type="text"/>  
    <label>姓名</label>  
    <div class="bar"></div>  
</div>

演示效果: CodePen

思考：

当Input框聚焦时，input底部的线的宽度会增加，不难看出，这是css3中的过渡效果。所以，只要写出变化前的css和变化后的css，然后在刚开始的css中设置transition: all .5s ease-in-out;

底部线条为_<div class=”bar”></div>,_变化之前：

position: absolute;  
left: 50%;  
bottom: 0;  
background: #40a9ff;  
width: 0%;  
height: 2px;

不难看出，变化之后的css为:

width: 100%;  
left: 0;

好， 当Input Focus时，去改变它

input:focus ~ .bar {  
    width: 100%;  
    left: 0;  
}

这里使用了~选择器。

同样的思路，先写出label变化之前的CSS

position: absolute;  
top: 50%;  
left: 0;  
transform: translateY(-50%);  
line-height: 20px;  
padding-left: 5px;  
color: #80868b;

label变化之后的css

position: absolute;  
top: 0;  
left: 10px;  
background: #fff;  
transform: translateY(-50%);  
line-height: 20px;  
padding-left: 5px;  
color: #1a73e8;

然后在Input Focus时将它们串联起来:

input:focus + label {  
    position: absolute;  
    top: 0;  
    left: 10px;  
    background: #fff;  
    transform: translateY(-50%);  
    line-height: 20px;  
    padding-left: 5px;  
    color: #1a73e8;  
}

这里使用了+选择器。

ok，完结撒花， 代码在头部CodePen中。