如何使用CSS使Google搜索栏在悬停时高亮显示

在设计过程中，搜索栏通常被忽视，尽管消费者依赖它来访问独特的信息。由于搜索栏是网站上使用最频繁的部分之一，搜索栏的设计对用户体验有很大影响。

搜索栏对于具有复杂内容的超过100页的网站非常有用。搜索栏用于帮助客户在面向消费者的电子商务网站、新闻网站、优惠网站和预订网站上查找信息。它们也被用于具有多个客户细分和产品线的大型B2B网站。对于少量页面的小型网站，搜索栏可能不是必需的，但随着网站的发展，它将变得必不可少。

搜索栏基本上由两个用户界面元素组成：输入字段和按钮。在本文中，我们将看到如何使用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>

一旦你将鼠标悬停在按钮元素上，其中的文本颜色从蓝色变为红色。此外，文本的字体大小也会增大。

盒子阴影属性

盒子阴影属性可以让开发者给一个元素应用一个或多个阴影。多个效果可以通过逗号分隔来赋值。

示例

<!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的hover属性。

示例

<!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>