大家好，今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输入框的风格。 虽然今天我们有很多框架可以帮我们实现这些风格，不过通过学习在底层是如何使用纯CSS实现的原理，可以加强我们将来需要根据业务需求定制化这些框架组件的能力。 Demo请看这里 ：点我看Demo 【CodePen】 最终效果图： 仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题，欢迎大家提供修改方法，一起学习进步！ 开始动手实现 首先，我们先创建如下的HTML：

大家好，今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输入框的风格。 虽然今天我们有很多框架可以帮我们实现这些风格，不过通过学习在底层是如何使用纯CSS实现的原理，可以加强我们将来需要根据业务需求定制化这些框架组件的能力。 Demo请看这里 ：点我看Demo 【CodePen】 最终效果图： 仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题，欢迎大家提供修改方法，一起学习进步！ 开始动手实现 首先，我们先创建如下的HTML：