今天小编跟大家讲解下有关CSS实现 Google Material Design 文本输入框风格(推荐) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现 Google Material Design 文本输入框风格(推荐) 的相关资料，希望小伙伴们看了有所帮助。
大家好 今天想要跟大家分享如何使用纯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 事件 而不是触发选择字体的事件。
效果图：
接下来我们要给 <input> 元素增加 padding-top 这样做可以将 <label> Username 顶上去一点。
接着我们给 <input> 元素加上 outline: none 这样当我们点击文本输入框的时候就不会再出现蓝色的边框了。
form input { height: 2rem; width: 10rem; padding-top: 1rem; border: none; border-bottom: 0.1rem solid black; outline: none; }效果图：
接着我们要在 <input> 元素后面的伪元素 ::after 上一个底部边框的样式 并且要将底部边框平移到左边。
之所以要将底部边框平移到左边 是将来要通过 overflow: hidden; 将其隐藏起来 只有当文本输入框被选中的时候 才将这个底部边框平移回来 作为一种加强视觉冲击的手段。
form label::after { content: ""; height: 3rem; width: 10rem; position: absolute; top: 0; left: 0; border-bottom: 0.2rem solid #1cb9b6; transform: translateX(-100%); transition: all 0.3s ease; }效果图：
接着我们要让 <label> 元素 Username 向下 刚好放在底部边框上。
form label span { position: absolute; bottom: -3rem; left: 0; transition: all 0.3s ease; }效果图：
接着我们要给处于 focus 跟处于 valid 状态的 <input> 元素做一个样式。也就是当我们选择文本输入框 或者当文本输入框里有文字的时候 它们应该处以被高亮的样式。
这里我们之所以可以利用 valid 状态是因为 在 HTML 里我们给 <input> 设定了 required 属性 所以当有文字在文本输入框的时候就是处于 valid 状态 反之亦然。
<input type=“text” required />form input:focus + label span,form input:valid + label span { transform: translateY(-120%); font-size: 1.2rem; color: #1cb9b6; }form input:focus + label::after,form input:valid + label::after { transform: translateX(0); }效果图：
接着我们要将不处于高亮时 闲置在左边的底部边框隐藏起来 我们只需要给 <form> 元素设定 overflow: hidden; 就可以了。
form { width: 50%; height: 50vh; margin: auto; position: relative; font-family: Sans-serif; overflow: hidden; }当处于未被选中 或者未输入的状态时 左边的高亮底部边框就看不见了。
效果图：
这样 我们就完成 Google Material Design 规格的文本输入框了。
总结
以上所述是小编给大家介绍的CSS实现 Google Material Design 文本输入框风格,希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！如果你觉得本文对你有帮助 欢迎转载 烦请注明出处 谢谢！
来源：爱蒂网
