小编给大家分享一下CSS实现谷歌材料设计文本输入框风格的示例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
虽然今天我们有很多框架可以帮我们实现这些风格,不过通过学习在底层是如何使用纯CSS实现的原理,可以加强我们将来需要根据业务需求定制化这些框架组件的能力。
演示请看这里:点我看演示【CodePen】
最终效果图:
仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题,欢迎大家提供修改方法,一起学习进步。
开始动手实现
首先,我们先创建如下的HTML:
这是一个常规的输入用户名的HTML表单。
相信聪明的大家都注意到了,我们将& lt; label>标签放在& lt; input>标签的后面,是因为我们之后需要通过& lt; input>标签的状态来选择& lt; label>然。而他们是同级兄弟关系,介于纯CSS选择器的只提供选择下一个兄弟的方法,我们就将& lt; label>标签放在后面。
效果图:
接着让我们对& lt; form>元素做一下CSS效果的定制。
这一段CSS没什么特别的,就是定义长度高度和字体而已。
接着让我们给& lt; input>元素上一些样式。
这一段CSS主要也是设置长度跟宽度,还有就是只设置下方的边框,让其有下划线的感觉。
效果图:
接下来我们要设置& lt; label>标签,也就是将用户名字样移动到文本输入框的上方。
这里值得注意的是,我们设定了:
<代码> pointer-events:没有。
是希望将来鼠标点击到文字的时候能够触发文本输入框焦点事件,而不是触发选择字体的事件。
效果图:
接下来我们要给& lt; input>元素增加padding-top,这样做可以将& lt; label>用户名顶上去一点。
接着我们给& lt; input>元素加上大纲:没有,这样当我们点击文本输入框的时候就不会再出现蓝色的边框了。
效果图:
接着我们要在& lt; input>元素后面的伪元素:在上一个底部边框的样式,并且要将底部边框平移到左边。
之所以要将底部边框平移到左边,是将来要通过溢出:隐藏;将其隐藏起来,只有当文本输入框被选中的时候,才将这个底部边框平移回来,作为一种加强视觉冲击的手段。
效果图:
