大家好，今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输入框的风格。
虽然今天我们有很多框架可以帮我们实现这些风格，不过通过学习在底层是如何使用纯CSS实现的原理，可以加强我们将来需要根据业务需求定制化这些框架组件的能力。
Demo请看这里 ：点我看Demo 【CodePen】
最终效果图：
仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题，欢迎大家提供修改方法，一起学习进步！
开始动手实现
首先，我们先创建如下的HTML：
<form>
<input type="text" required />
<label>
<span>Username</span>
</label>
</form>这是一个常规的输入用户名的 HTML 表单。
相信聪明的大家都注意到了，我们将 <label> 标签放在 <input> 标签的后面，是因为我们之后需要通过 <input> 标签的状态来选择 <label>。然而他们是同级兄弟关系，介于纯CSS的selector只提供选择下一个兄弟的方法，我们就将 <label> 标签放在后面。
效果图：
接着让我们对 <form> 元素做一下CSS效果的定制。
form {
width: 50%;
height: 50vh;
margin: auto;
position: relative;
font-family: Sans-serif;
}这一段CSS没什么特别的，就是定义长度高度和字体而已。
接着让我们给 <input> 元素上一些样式。
form input {
height: 2rem;
width: 10rem;
border: none;
border-bottom: 0.1rem solid black;
}这一段 CSS 主要也是设置长度跟宽度，还有就是只设置下方的边框，让其有下划线的感觉。
效果图：
接下来我们要设置 <label> 标签，也就是将 Username 字样移动到文本输入框的上方。
form label {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}这里值得注意的是，我们设定了：
pointer-events: none;是希望将来鼠标点击到文字的时候能够触发文本输入框 focus 事件，而不是触发选择字体的事件。
效果图：
