CSS 如何使谷歌搜索栏的输入框在悬停时高亮
搜索栏是一个网站在设计过程中经常被忽视的部分,尽管消费者依靠它来获取独特的信息。由于搜索栏是网站上最常使用的部分之一,搜索栏的设计对用户体验有相当大的影响。
搜索栏在有100多页复杂内容的网站上是有益的。在企业对消费者(B2C)领域的大型电子商务网站、新闻网站、优惠网站和预订网站上,搜索栏被用来帮助客户定位信息。它们也被用于有多个客户群和产品系列的大型B2B网站。对于一个只有几页的小网站来说,搜索栏可能没有必要,但随着网站的发展,它将是必不可少的。
搜索栏基本上是由两个UI元素组成的:一个输入框和一个按钮。在这篇文章中,我们将看到如何使用CSS属性来创建一个类似于谷歌搜索栏的高亮输入框。
谷歌搜索栏
搜索栏是任何互联网浏览器中的一个位置,它使用户能够通过互联网搜索到所需的信息。它也使读者在浏览网站时能够搜索网站。同样,用户可以使用谷歌搜索栏从他们的主屏幕上进行任何类型的搜索,谷歌搜索栏是一个与谷歌应用相连的搜索小工具。
输入框
<input>
标签是一个HTML元素,用于创建基于网络的交互式表格,供用户提交他们的数据。根据设备和用户的类型,有几种输入数据类型。<input>
元素是HTML中最流行和最常用的元素之一,因为它有各种输入数据类型和属性。
以下是这个元素的语法
<input type= "value" id= "demo" name= "demo">
注意 - 使用<label>
标签来定义<input>
元素的元素。<label>
元素的for属性应该与<input>
元素的id相同。
CSS 悬停属性
:hover 是CSS的一个伪类,它可以让用户知道指向性设备已经点击或移动了该特定元素。例如,如果你把鼠标悬停在页面上的某个元素上,它的字体颜色或背景颜色可能会根据指定的CSS属性而改变。
例子
请看下面的例子 –
<!DOCTYPE html>
<html>
<head>
<title> CSS buttons </title>
<style>
button{
margin: 10px 5px 10px 10px;
padding: 5px;
color: blue;
}
button:hover{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1> Hovering on a Button </h1>
<button> Click Me! </button>
</body>
</html>
一旦你在Button元素上悬停,其中的文字颜色就会从蓝色变成红色。此外,文本的字体大小也会增加。
盒状阴影属性
box-shadow属性使开发者能够对一个元素应用一个或多个阴影。只需用逗号隔开,就可以分配多个效果。
例子
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px solid;
padding: 10px 15px;
box-shadow: -5px -10px 0px 5px grey;
}
</style>
</head>
<body>
<h1> The box-shadow property</h1>
<article id="demo"></article>
</body>
</html>
创建输入框的亮点
为了创建一个像谷歌搜索栏那样的输入框,我们需要遵循以下步骤-
- 创建一个type=”text “的输入框。
-
使用CSS调整其高度和宽度。使用box-shadow属性为输入栏提供阴影效果。
-
为了使它类似于谷歌搜索栏,阴影效果应该在悬停时显示,所以我们将使用CSS的悬停属性。
例子
<!DOCTYPE html>
<html>
<head>
<title> Input search box </title>
<style>
body{
background-color: cyan;
}
h1{
color: #00F00;
text-decoration: underline;
}
#search-box{
width: 350px;
height: 20px;
border-radius: 21px;
text-align: center;
border: 1px solid #EDEADE;
outline: none;
display: block;
}
#search-box:hover{
box-shadow: 4px 4px 4px grey;
cursor: pointer;
}
input:hover {
box-shadow: 0px 1px 3px rgb(192, 185, 185);
}
button{
padding: 2px 7px;
border-radius: 3px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<div class= "box">
<h1> Tutorialspoint </h1>
<input type= "text" id= "search-box"> <br> <br>
<button> Search </button>
</center>
</body>
</html>
结语
在这篇文章中,我们讨论了如何创建一个类似于谷歌搜索栏的输入框,在悬停时被高亮显示。