Search Bar CSS

在本文中，我们将学习 CSS 中的搜索栏。首先，让我们了解什么是搜索栏。

搜索栏

搜索栏是网页上显示的一个框，允许用户搜索网站上的内容。

它用于搜索查询。您可以将查询输入搜索栏并按 Enter 键。

我们可以借助 CSS 创建一个搜索栏，我们将通过演示来理解这一点。

搜索栏演示

让我们来理解如何用 CSS 创建一个搜索栏。

演示 1

在此演示中，我们将使用 <input> 标签创建输入字段，并使用<button> 标签在搜索栏前面创建提交按钮，来构建一个简单的搜索栏。

代码

输出

下面是输出，我们可以从中看到一个简单的搜索栏。

演示 2

在本例中，我们将构建一个带有搜索框的简单的导航栏。

代码

输出

这是输出，我们可以看到搜索栏位于导航栏内。

演示 3

在此演示中，我们将构建一个响应式导航栏，这意味着导航栏会根据屏幕大小进行调整。我们还将在导航栏内添加一个搜索框。

代码

输出

当屏幕全屏时，我们可以清楚地看到带有搜索框的导航栏。

如果我们改变屏幕尺寸，导航栏会根据屏幕尺寸进行调整，如下面的输出所示。

演示 4

在此演示中，我们将创建一个动画搜索栏。

代码

输出

当搜索栏未被点击时，我们可以看到下面的输出。

当搜索栏被点击时，网页的背景颜色会发生变化，如下所示。

演示 5

在本例中，我们将构建一个导航栏内的动画搜索框。

代码

输出

这是输出，我们可以看到导航栏内的搜索框和搜索图标，但搜索框需要完全可见。

当点击搜索框的可见部分时，搜索框会展开，如下面的输出所示。

演示 6

在此演示中，我们将创建一个动画搜索栏，该搜索栏仅在按下搜索图标时展开。

代码

输出

这是输出，我们可以看到搜索栏，并且当搜索图标未被按下时，如下所示。

当按下搜索图标时，整个搜索框如下所示。

演示 7

在此演示中，我们将构建一个动画搜索栏。当按下搜索图标时，搜索栏会出现一个关闭按钮。如果点击关闭按钮，搜索框会收缩。

代码

输出

这是输出，我们可以看到搜索栏，并且当搜索图标未被点击时，如下所示。

当按下搜索图标时，搜索框会出现一个关闭按钮，如下所示。

演示 8

在本演示中，我们将构建一个矩形搜索栏，其中包含一个搜索图标，并且当鼠标悬停时，搜索图标会变成一个箭头。

代码

输出

在这里，输出中我们可以看到矩形搜索栏。

当鼠标悬停在搜索图标上时，它会变成一个箭头，如下所示。

结论

在本文中，我们已经学习了搜索栏 CSS。我们可以使用 <input> 和 <button> 标签来构建搜索栏，并使用 CSS 为其设置样式。我们已经学会了如何通过 CSS 为搜索栏添加动画。