css实现Material Design风格的输入框

效果图：

html：

<div id="inpit-box">
	<input class="input-control" placeholder="账号"/>
	<label class="input-label">账号</label>
</div>

css：

           .input-control{
			   outline: none;
				height: 35px;
				border: 1px solid #808080;
				line-height: 35px;
			}
			/* placeholder-shown: 当输入框placeholder内容显示时 */
			.input-control:placeholder-shown::placeholder{
				color: transparent;   /* 设置为透明*/ 
			}
			#inpit-box{
				position: relative;
			}
			.input-label{
				position: absolute;
				left: 16px;
				top: 9px;
				pointer-events: none;  /*鼠标放至文本上时，元素不对指针事件作出反应*/
				color: #808080;
				font-size: 13px;
			}
			 .input-control:focus{
				border: 1px solid #007FFF;
			 }
			 /* 选择前面有类选择器为.input-control(除了input默认值)的每个类选择器为.input-label的元素*/
			.input-control:not(:placeholder-shown) ~ .input-label,
			/* 选择聚焦前面有类选择器为.input-control的每个类选择器为.input-label的元素*/
			.input-control:focus ~ .input-label{
				color: #007FFF;
				background-color: white;
				padding-left: 3px;
				padding-right: 3px;
				transform: scale(0.75) translate(-2px, -25px);
				transition: 0.5s;
			}