如何用CSS实现简单大气的输入框

这篇“如何用CSS实现简单大气的输入框”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用CSS实现简单大气的输入框”文章吧。 先上一个效果图：在效果图里面我们看到有两个输入框，一个为文本输入框，一个为密码输入框。
由于两个输入框的样式大体差不多，所以我们只讲述第一个输入框的实现。实际上，这个输入框有两部分组成：
分别是输入框的提示内容和输输入框本体。我们将输入框的提示内容放进label标签中，并且给label标签添加一个for属性，值为输入框的id属性值。这样用户在点击提示语句时，光标会自动聚焦到输入框中。到此为止，我们输入框的结构就搭建好了。我们先给整个大盒子添加一个相对定位，方便后续我们对里面元素的位置调整。顺便设置一个整个盒子的大小。接下来我们就给输入框改变一个样式，毕竟这样一个默认的框框实在太难看了。这里我们首先给整个输入框的整体调整一个位置，然后设置一个字体大小，这样我们的输入框就有了一个基本的样式。下面就开始设置输入框的样式：在这里我们设置了输入框的宽度，高度，字体颜色，字体大小，边框，背景颜色。因为我此时整个大背景颜色为rgb(54, 54, 54),为了不让这个输入框这么突出没所以我设置了输入框的背景颜色与大背景颜色为一样的颜色。但是这样还不够，因为在输入框获得焦点的时候，输入框外边还有一个边框，这样会使得输入框很丑。通过outline属性我们可以设置输入框获得焦点时的边框样式。
在效果图中，我们可以看见输入框获得焦点时，输入框下边有一个蓝色的边框，这个边框的宽度为2px，颜色为#0FF。我们我们这样给输入框来一个样式：这样输入框的样式就出来了：
在效果图里面输入框还未获得焦点的时候，提示语句在输入框里面的，这个就是我们使用绝对定位来实现的，调整到合适的位置，将提示语句放在输入框里面。
并且此时文字的颜色为白色。最后这整个输入框的样式就是这样：
当然现在这是一个静态的输入框，没有任何的交互，我们接下来就来实现这个输入框的交互。交互肯定需要一个动画来实现，这里我们发现在输入框获得焦点之后，提示文字会变小，颜色也会随之改变，然后移动到输入框的上方，这个就是我们需要实现的效果。失去焦点之后,我们就会判断，这个输入框里面是否有内容：
如果有内容的话，动画就不移除，一直保持动画的结束状态；如果没有内容，就移除动画回到初识状态。那么我们定义一个动画：现在有一个问题，我们点击输入框，最后将这个动画添加到输入框的提示语句上，那么我们如何将动画添加上去呢？我这里使用的jquery中对class的操作来实现，也就是利用jQuery中的addClass()和removeClass()方法来实现。那么在此之前，我们就需要先将动画写进一个类里面，然后通过jQuery来操作这个类。我这里简单的写了一个class，然后将动画写进去：然后我们就可以通过jQuery来操作这个类了：最后点击保存，运行，就可以看到效果了。以上就是关于“如何用CSS实现简单大气的输入框”这篇文章的内容，相信大免费云主机、域名家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注云技术行业资讯频道。

相关推荐: vue单页面和多页面是什么

本文小编为大家详细介绍“vue单页面和多页面是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue单页面和多页面是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 在vue中，单页面全称“SPA单页面应用”，是指只有一个主页…