CSS 如何使谷歌搜索栏的输入框在悬停时高亮
搜索栏是一个网站在设计过程中经常被忽视的部分,尽管消费者依靠它来获取独特的信息。由于搜索栏是网站上最常使用的部分之一,搜索栏的设计对用户体验有相当大的影响。
搜索栏在有100多页复杂内容的网站上是有益的。在企业对消费者(B2C)领域的大型电子商务网站、新闻网站、优惠网站和预订网站上,搜索栏被用来帮助客户定位信息。它们也被用于有多个客户群和产品系列的大型B2B网站。对于一个只有几页的小网站来说,搜索栏可能没有必要,但随着网站的发展,它将是必不可少的。
搜索栏基本上是由两个UI元素组成的:一个输入框和一个按钮。在这篇文章中,我们将看到如何使用CSS属性来创建一个类似于谷歌搜索栏的高亮输入框。
谷歌搜索栏
搜索栏是任何互联网浏览器中的一个位置,它使用户能够通过互联网搜索到所需的信息。它也使读者在浏览网站时能够搜索网站。同样,用户可以使用谷歌搜索栏从他们的主屏幕上进行任何类型的搜索,谷歌搜索栏是一个与谷歌应用相连的搜索小工具。
输入框
<input>
标签是一个HTML元素,用于创建基于网络的交互式表格,供用户提交他们的数据。根据设备和用户的类型,有几种输入数据类型。<input>
元素是HTML中最流行和最常用的元素之一,因为它有各种输入数据类型和属性。
以下是这个元素的语法
注意 - 使用<label>
标签来定义<input>
元素的元素。<label>
元素的for属性应该与<input>
元素的id相同。
CSS 悬停属性
:hover 是CSS的一个伪类,它可以让用户知道指向性设备已经点击或移动了该特定元素。例如,如果你把鼠标悬停在页面上的某个元素上,它的字体颜色或背景颜色可能会根据指定的CSS属性而改变。
例子
请看下面的例子 –
一旦你在Button元素上悬停,其中的文字颜色就会从蓝色变成红色。此外,文本的字体大小也会增加。
盒状阴影属性
box-shadow属性使开发者能够对一个元素应用一个或多个阴影。只需用逗号隔开,就可以分配多个效果。
例子
创建输入框的亮点
为了创建一个像谷歌搜索栏那样的输入框,我们需要遵循以下步骤-
- 创建一个type=”text “的输入框。
-
使用CSS调整其高度和宽度。使用box-shadow属性为输入栏提供阴影效果。
-
为了使它类似于谷歌搜索栏,阴影效果应该在悬停时显示,所以我们将使用CSS的悬停属性。
例子
结语
在这篇文章中,我们讨论了如何创建一个类似于谷歌搜索栏的输入框,在悬停时被高亮显示。