您现在的位置是：网站首页> 编程资料编程资料

CSS实现 Google Material Design 文本输入框风格(推荐)CSS实现带箭头的提示框效果【示例代码】纯css实现输入框placeholder动效及输入校验CSS使用placeholder-shown伪类实现输入框浮动文字效果CSS实现让同一行文字和输入框对齐的方法CSS实现输入框的周围高亮效果让边框发亮

2023-10-19 185人已围观

简介 这篇文章主要介绍了CSS实现 Google Material Design 文本输入框风格的相关资料,需要的朋友可以参考下

大家好，今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输入框的风格。

虽然今天我们有很多框架可以帮我们实现这些风格，不过通过学习在底层是如何使用纯CSS实现的原理，可以加强我们将来需要根据业务需求定制化这些框架组件的能力。

Demo请看这里 ：点我看Demo 【CodePen】

最终效果图：

在这里插入图片描述

仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题，欢迎大家提供修改方法，一起学习进步！

开始动手实现

首先，我们先创建如下的HTML：

这是一个常规的输入用户名的 HTML 表单。

相信聪明的大家都注意到了，我们将

效果图：

效果图

接着让我们对

元素做一下CSS效果的定制。

 form { width: 50%; height: 50vh; margin: auto; position: relative; font-family: Sans-serif; }

这一段CSS没什么特别的，就是定义长度高度和字体而已。

接着让我们给 元素上一些样式。

 form input { height: 2rem; width: 10rem; border: none; border-bottom: 0.1rem solid black; }

这一段 CSS 主要也是设置长度跟宽度，还有就是只设置下方的边框，让其有下划线的感觉。

效果图：

在这里插入图片描述

接下来我们要设置 

 form label { position: absolute; top: 0; left: 0; pointer-events: none; }

这里值得注意的是，我们设定了：

pointer-events: none;

是希望将来鼠标点击到文字的时候能够触发文本输入框 focus 事件，而不是触发选择字体的事件。

效果图：

在这里插入图片描述

接下来我们要给 元素增加 padding-top，这样做可以将

接着我们给 元素加上 outline: none， 这样当我们点击文本输入框的时候就不会再出现蓝色的边框了。

 form input { height: 2rem; width: 10rem; padding-top: 1rem; /* 新增 */ border: none; border-bottom: 0.1rem solid black; outline: none; /* 新增 */ }

效果图：

在这里插入图片描述

接着我们要在 元素后面的伪元素 ::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%); /* 向左平移 100% 确保移出 form 元素之外 */ transition: all 0.3s ease; /* 添加动画来达到平滑移动的效果 */ }

效果图：

在这里插入图片描述

接着我们要让 

 form label span { position: absolute; bottom: -3rem; left: 0; transition: all 0.3s ease; /* 动画，达到平滑移动的效果 */ }

效果图：

在这里插入图片描述

接着我们要给处于 focus 跟处于 valid 状态的 元素做一个样式。也就是当我们选择文本输入框，或者当文本输入框里有文字的时候，它们应该处以被高亮的样式。

这里我们之所以可以利用 valid 状态是因为，在 HTML 里我们给 设定了 required 属性，所以当有文字在文本输入框的时候就是处于 valid 状态，反之亦然。

 form input:focus + label span, form input:valid + label span { transform: translateY(-120%); /* 将 Username向上平移 */ font-size: 1.2rem; /* 变大字体，突显高亮效果 */ color: #1cb9b6; /* 高亮颜色 */ } form input:focus + label::after, form input:valid + label::after { transform: translateX(0); /* 将左边的高亮底部边框平移回来 */ }

效果图：

在这里插入图片描述

接着我们要将不处于高亮时，闲置在左边的底部边框隐藏起来，我们只需要给 元素设定 overflow: hidden; 就可以了。

 form { width: 50%; height: 50vh; margin: auto; position: relative; font-family: Sans-serif; overflow: hidden; /* 新增 */ }

当处于未被选中，或者未输入的状态时，左边的高亮底部边框就看不见了。

效果图：

在这里插入图片描述

这样，我们就完成 Google Material Design 规格的文本输入框了。

总结

以上所述是小编给大家介绍的CSS实现 Google Material Design 文本输入框风格,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：使用CSS3实现SVG路径描边动画效果入门教程纯CSS3代码实现文字描边简单掌握CSS3将文字描边及填充文字颜色的方法

下一篇：详解CSS盒子塌陷的5种解决方法解决CCS中的margin：top塌陷问题css高度塌陷问题的解决方案浅谈CSS 高度塌陷问题关于清除浮动塌陷的几种方法总结CSS中如何解决外边距塌陷问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网