数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 使 Google 搜索栏样式的输入框在悬停时高亮显示？
在设计过程中，搜索栏通常是被网站忽略的一个组件，尽管用户依赖它来访问独特的信息。由于搜索栏是网站上最常使用的部分之一，因此搜索栏的设计对用户体验有很大影响。
对于包含超过 100 个页面复杂内容的网站，搜索栏非常有用。在 B2C 行业中，搜索栏用于帮助客户在大型电子商务网站、新闻网站、优惠网站和预订网站上查找信息。它们也用于具有多个客户细分和产品线的庞大 B2B 网站。对于页面数量很少的小型网站，可能不需要搜索栏，但随着网站的增长，它将变得至关重要。
搜索栏基本上由两个 UI 元素组成：一个输入字段和一个按钮。在本文中，我们将了解如何使用 CSS 属性创建类似于 Google 搜索栏的输入框高亮显示。
Google 搜索栏
搜索栏是任何互联网浏览器中的一个位置，它使用户能够通过互联网搜索所需的信息。它还使用户在浏览网站时能够搜索某个网站。同样，用户可以使用 Google 搜索栏（与 Google 应用关联的搜索小部件）从主屏幕进行任何类型的搜索。
输入框
<input> 标签是一个 HTML 元素，用于创建基于 Web 的交互式表单，供用户提交其数据。根据设备和用户的类型，存在多种输入数据类型。由于其各种输入数据类型和属性，<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>
将鼠标悬停在“按钮”元素上时，其中的文本颜色会从蓝色更改为红色。此外，文本的字体大小也会增加。
box-shadow 属性
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>
创建输入框高亮显示
为了创建像 Google 搜索栏一样的输入框，我们需要遵循以下步骤：
创建一个 type="text" 的输入字段。
使用 CSS 调整其高度和宽度。使用 box-shadow 属性为输入字段提供阴影效果。
为了使其类似于 Google 搜索栏，应在悬停时显示阴影效果，因此我们将使用 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>
结论
在本文中，我们讨论了如何创建类似于 Google 搜索栏的输入框，该输入框在悬停时会高亮显示。
1K+ 次查看
