Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

搜索表格输入框和按钮的CSS实验

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Alfred Y. Zhu (you can also view the original English article)

在这篇教程中,我将与你一起探索如何才可以建立一个简单的搜索表格。 我不会做任何疯狂的事情,相反,我会探索四种不同的方式来带你体验如何才能整洁的拥有一个搜索框以及一些CSS帮助下的过渡。

你已经有了一个基本的搜索框

在你的HTML文件中,你需要需要从创建一个搜索的input来开始。 如果你能看看下面的这些代码,你会注意到4个不同的东西:一个.box的div,一个.container-1 的div,一个.icon,以及搜索的input自己。

所有的这4个样例都会有一个搜索框 - 自然地 - 当然还有一个搜索的图标。 在这四个样例中,他们每一个都被放在一个容器里,所以我们可以独立的操作每一个搜索框。 最后,这个div还可以让所有的容器都是居中对齐的。

添加Font Awesome

Font Awesome是一个图标库, 你可以在Font Awesome的网站学习更多关于这个项目的知识。

上面这个代码的片段是一个关于如何给你的代码结构中包含一个图标的样例。 无论如何,为了让图标显示你显示你还需要包含一个指向Font Awesome库的链接,你可以从下面的片段看到, 只要在文档的head部分插入这个链接即可。

基本的样式

我们现在要在分离的一个样式表添加一些样式(你同时需要在文档的head添加一个链接来让它生效)。

在上面这个CSS片段中,我们添加了一些基本的样式到页面上, 这个搜索框的样式是一个深蓝颜色的,所以背景的颜色不能是全白的。 这个盒子的class同时是在页面中居中的,这个也是为了这篇教程的展示。

装饰搜索框

这个教程片段全部是关于学习如何装饰搜索框的。 在第一个样例中我会用更详细的内容来解释我们要做什么;我希望确保你明白我们到底要做什么。 在接下来的3个样例中,我会简单的向你们展示如何来实现不同的过渡效果。

#1. 背景淡出

第一个样例我们将要攻克的是每一个搜索的input都会在鼠标滑过时改变背景。 我们同时会添加一个过渡效果来让它看起来不会不和谐。

HTML部分

你已经看到了最基本的HTML页面结构, 这个片段看起来和其他的样例都很相似。

CSS部分

为了开始我们的样式,我们需要为搜索框自己定义一些样式。 让我们一个个添加CSS规则这样你就知道到底是怎么回事了。

首先,我们想要为我们的容器添加样式。 最重要的属性可能是position:relative。 这个是特别设置的所以你的图标可以被放置在input的上面,你接下来很快就会看到。

Input

接下来,我们想为这个真正的input来添加样式, 所有的上面完成的只是纯粹的为了美观考虑的元素,那些边框的圆角或者背景颜色并不会影响input的工作。 请用笔记几下左侧的padding属性, 它是在那里来创建一点空间为图标准备的,所以其实它实际上并不是在input的文字顶上。

在下面,我们有4中不同的规则,他们会为我们样例中的Search字样添加占位符的颜色。 这个规则不幸的是需要与每一个其他的前缀元素分离,而且并不能被加固为一个简写的规则。 你可能会觉得有点点烦人而且在每一个样例中你都要重复操作!

图标

最后,我们将要为图标添加样式, 最重要的是我们将要设置它的位置是在input顶部的,我们使用position:absolute。 Margin帮助我们将图标放置在顶部的50%位置。

添加鼠标悬停效果

下一组规则我们要创建的是当搜索框被鼠标悬停产生的效果。 在这个样例中,我们只想改变背景颜色, 为了去除input周围黄色或蓝色的光亮(浏览器有时候会添加它们)设置outline:none

你从上面的片段可以看到,沃恩添加了2条额外的声明—focusactive。 这样当你停止鼠标悬停input动作的时候效果就不会消失。 更重要的是,这个效果同时在input被使用的时候会被显现出。

创建过渡

为了产生过渡,我们需要添加几行代码。 回到很前面的地方我们定义input.container-1样式的规则, 在input#search中, 在闭合括号之前添加下列片段:

我们需要定义过渡的动作简写,但是我们可以用依次定义他们的参数作为替代。 首先,我们说过渡应该仅仅作用于背景的性质。 接下来,我们说过渡应该差不多要有略微超过半秒的时间。 最后,我们要定义过渡在消退之前的效果。 这个ease不是唯一在这里工作的效果,我们同事可以使用linear或者ease-in,举个例子。 它简单的可以看起来有点不同。 自己尝试知道你看到你最喜欢的结果。

这个input的样式应该看起来像下面代码显示的一样。

CSS过渡是如何工作的?

如果你不知道任何关于CSS过渡的事情,让我给你一个简短的概述。 首先,为了让过渡工作,我们必须要先定义属性声明而且不在鼠标悬停的地方(hover),或者是激活的区域(active),或者焦点(focus)。

CSS过渡允许逐步的改变效果,而且你可以定义特定的参数来控制,比如哪个属性会被触发,过渡的持续时间,和哪一种过渡等等。 你可以拥有很多个过渡集同时作用于同一个元素。 但是,最重要的是,你应该总是包含一个商家前缀来确保在不同的浏览器背景下,它们都是对这个属性都是被支持的而不是通用的。

对于更多的信息请移步至如下观看:CSS3过渡和变换从零开始

#2. 当鼠标悬停展开input

在这个案例中,搜索框开始的时候只有一个放大镜的图标。 当你鼠标悬停在图标上的时候,搜索会展开兵允许你输入字符串。 这个例子中大部分的代码都和之前的一个非常相似。

HTML部分

CSS部分

这个过渡input的样式有点不同, input会明显的小一些所以图标可以显示在正方形后面, 所有剩下的属性,像是背景或者文字颜色,都是一样的,因为我们并不想完全改变搜索的样式。

你同时可以看到,我定义了过渡的属性仅仅作用于宽度。 我会保持过渡的持续时间是一样的,因为它比较快,所以有时候不会让用户觉得很烦,但又不是特别短,已经足够很好的显示出这个效果了。

下面的这段代码就是用来改变占位符的颜色的。

而且再一次,我们已经有了图标的CSS样式。 它应该是和前一个样例一模一样。

添加鼠标悬停效果

最后一件事情我们需要做的就是定义在鼠标悬停时候搜索框的样子。 在下面的片段,第一条规则是为了确保表单不会在使用输入框的时候显示浏览器默认的边框 - 当输入的时候,搜索框会一直保持是打开的状态。 中间一条规则会在鼠标悬停的时候展开input到完全的尺寸。

上面代码的最后一条是用来改变鼠标悬停时候图标的颜色, 这只是一个很小的细节,可以快速的展示给用户搜索框是激活并且工作的,而不是只是一个闲置的输入框。 这个改变并不是由变化生成的。

#3. 鼠标悬停增加图标尺寸

在这4个样例中,这个不论在代码的结构还是视觉效果上都是最巧妙地。 为了让放大镜的图标变的更明显我们将要稍微的增加它的尺寸。

HTML部分

再一次,图标和搜索框在HTML中的结构是和前两个案例一样的。 唯一不同的,当然就是.container-3的class名字

CSS部分

CSS对于这个样例来说没什么特别的, 最多就是它开始的部分和第一个样例几乎一样,默认的设定完全没有任何区别。 下面的代码是为了容器和输入框准备的, 注意,在这个样例的input并没有任何过渡效果。

再一次的,我们将为我们的占位符添加规则。

现在,如果只是看着它,这个图标在这个案例的样子完全是和别的没什么区别, 同样的颜色,同样的位置等等。 然而,我还需要为其添加过渡效果。 这个过渡将指向所有的性质,这样就可以简短的实现效果而不用分别的将它们一个个列出了。

添加鼠标悬停效果

有几个不同的事情发生在上面的代码中。 首先,我们在鼠标悬停在图标的时候改变了它的颜色,然后将它向上移动了一点点所以在纵向改变大小的时候它就是居中了。 第二步,我们添加了一个过渡到鼠标悬停的图标元素上,这样我们就可以得到一个1.5倍原始尺寸的图标。 由于之前定义的过渡是作用于所有的属性的,所以当鼠标悬停在图标上时候,图标的大小会变化。

再一次,看看CSS3过渡和变形从零开始来学习更多关于变换的属性。

#4. 悬停按钮

不像前三个样例,这个会更加的复杂一些。 在鼠标悬停时,一个按钮会滑到input的顶部并允许你接着进行操作 - 像发送或者Go一样。 这个按钮会有一个放大镜的图标在上面。

HTML部分

在这里,HTML有一点点不同, input当然仍然在这里,不过图标现在是在button元素之内的,它们会出现在input的后面, 按钮是在input之后是很重要的,因为它决定了悬停效果如何在CSS中被创建。

CSS部分

在这个样例中CSS有点点不一样,所以请集中注意力! 下面的片段是容器的样式。 首先,少了position:relative;它不再重要因为图标现在不依赖这个样式来显示在input顶部了。 然而,我们确实有oveerflow:hidden。 这个让按钮在非鼠标悬停状态依然保持是显示状态。 理论上来说按钮会出现在input的右侧,但是感谢overflow:hidden当它的宽度超过input的容器后它并没有显示出来 - 容器和input是同样的宽度。

在下面,input并没有过渡因为它在这个案例中并不是被作用的元素。

这个片段是为了改变占位符文字的颜色。

下面的代码是为了鼠标悬停在按键上的样式。 有一个小技巧来让它从侧面滑出,放置它到右侧并且在input的下方,然后让他变得不可见,除非鼠标悬停。 这样,按钮是那个改变的元素 - 它会移动 - 所以过渡的效果被定义在它身上。 为了让事情变得简单一些,我已经将过渡的所有属性都定义了。

添加鼠标悬停效果

为了让按钮淡出,它需要移动到input的顶上。 我们需要使用负数的margin来完成它, 我们预先设置按钮的不透明度为0所以我们就可以将它重置为1来显示按钮。

最后一条规则只会在你鼠标悬停在按钮上的时候改变按钮的背景。 让用户知道按钮是激活的总是好的,而且你可以点击它来提交搜索;如果这个功能是没有激活的状态就没有必要有一个按钮在那里了。

结论

好了,这些就是我们这个CSS实验的全部内容了! 我们用简单的搜索框和input以及小范围的效果来改变它们的样式。 你们还有其他的任何对于如何改变此类型的搜索input的建议么? 你有一些其他的你想要使用CSS过渡或者变化的地方么? 请在留言区留言告知我们!

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.