如何使用 CSS 使 Google 搜索栏（如输入框）在悬停时突出显示？

百变鹏仔 3个月前 (09-19) #CSS

文章标签如何使用

搜索栏是网站设计过程中经常被忽视的组成部分，尽管消费者依靠它来访问独特的信息。由于搜索栏是网站上最常用的部分之一，因此搜索栏的设计对用户体验有相当大的影响。

搜索栏对于包含超过 100 页复杂内容的网站很有用。搜索栏用于帮助客户在企业对消费者 (B2C) 领域的大型电子商务网站、新闻网站、优惠网站和预订网站上查找信息。他们还受雇于拥有多个客户群和产品线的大型 B2B 网站。对于页面很少的小网站来说，搜索栏可能不是必需的，但随着网站的发展，搜索栏将是必不可少的。

搜索栏基本上由两个 UI 元素组成：一个输入字段和一个按钮。在本文中，我们将看到如何使用 CSS 属性创建一个类似于 Google 搜索栏的输入框突出显示。

Google 搜索栏

搜索栏是任何互联网浏览器中的一个位置，使用户能够通过互联网搜索所需的信息。它还使读者能够在浏览网站的同时搜索网站。同样，用户可以使用谷歌搜索栏（与谷歌应用程序链接的搜索小部件）从主屏幕进行任何类型的搜索。

立即学习“前端免费学习笔记（深入）”；

输入框

标签是一个 HTML 元素，用于创建基于 Web 的交互式表单，以便用户提交数据。根据设备和用户的类型，有多种输入数据类型。元素因其各种输入数据类型和属性而成为 HTML 中最流行和最常用的元素之一。

以下是其语法 -

<input type= "value" id= "demo" name= "demo">

注意 - 使用标签来定义元素的元素。元素的 for 属性应与元素的 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 属性使开发人员能够向元素应用一个或多个阴影。只需用逗号分隔即可分配多个效果。

示例

<!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 搜索栏的输入框，该输入框在悬停时会突出显示。

文章推荐

如何使用 CSS 使 Google 搜索栏（如输入框）在悬停时突出显示？

Google 搜索栏

输入框

CSS 悬停属性

示例

盒子阴影属性

示例

创建输入框突出显示

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写