如何使用 CSS 使 Google 搜索欄（如輸入框）在懸停時突出顯示？-魔扣目錄

搜索欄是網(wǎng)站設(shè)計過程中經(jīng)常被忽視的組成部分，盡管消費(fèi)者依靠它來訪問獨(dú)特的信息。由于搜索欄是網(wǎng)站上最常用的部分之一，因此搜索欄的設(shè)計對用戶體驗有相當(dāng)大的影響。

搜索欄對于包含超過 100 頁復(fù)雜內(nèi)容的網(wǎng)站很有用。搜索欄用于幫助客戶在企業(yè)對消費(fèi)者 (B2C) 領(lǐng)域的大型電子商務(wù)網(wǎng)站、新聞網(wǎng)站、優(yōu)惠網(wǎng)站和預(yù)訂網(wǎng)站上查找信息。他們還受雇于擁有多個客戶群和產(chǎn)品線的大型 B2B 網(wǎng)站。對于頁面很少的小網(wǎng)站來說，搜索欄可能不是必需的，但隨著網(wǎng)站的發(fā)展，搜索欄將是必不可少的。

搜索欄基本上由兩個 UI 元素組成：一個輸入字段和一個按鈕。在本文中，我們將看到如何使用 CSS 屬性創(chuàng)建一個類似于 Google 搜索欄的輸入框突出顯示。

Google 搜索欄

搜索欄是任何互聯(lián)網(wǎng)瀏覽器中的一個位置，使用戶能夠通過互聯(lián)網(wǎng)搜索所需的信息。它還使讀者能夠在瀏覽網(wǎng)站的同時搜索網(wǎng)站。同樣，用戶可以使用谷歌搜索欄（與谷歌應(yīng)用程序鏈接的搜索小部件）從主屏幕進(jìn)行任何類型的搜索。

輸入框

標(biāo)簽是一個 HTML 元素，用于創(chuàng)建基于 Web 的交互式表單，以便用戶提交數(shù)據(jù)。根據(jù)設(shè)備和用戶的類型，有多種輸入數(shù)據(jù)類型。元素因其各種輸入數(shù)據(jù)類型和屬性而成為 HTML 中最流行和最常用的元素之一。

以下是其語法 –

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

登錄后復(fù)制

注意 – 使用標(biāo)簽來定義元素的元素。元素的 for 屬性應(yīng)與元素的 id 相同。

CSS 懸停屬性

:hover 是 CSS 的偽類，它使用戶能夠知道定點(diǎn)設(shè)備已單擊或在該特定元素上移動。例如，如果您將鼠標(biāo)懸停在頁面上的某個元素上，其字體顏色或背景顏色可能會根據(jù)指定的 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>

登錄后復(fù)制

將鼠標(biāo)懸停在“按鈕”元素上后，其中文本的顏色將從藍(lán)色變?yōu)榧t色。此外，文本的字體大小也會增加。

盒子陰影屬性

box-shadow 屬性使開發(fā)人員能夠向元素應(yīng)用一個或多個陰影。只需用逗號分隔即可分配多個效果。

示例

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

登錄后復(fù)制

創(chuàng)建輸入框突出顯示

為了創(chuàng)建像Google搜索欄一樣的輸入框，我們需要遵循以下步驟 –

創(chuàng)建一個 type=“text”的輸入字段。

使用 CSS 調(diào)整其高度和寬度。使用 box-shadow 屬性為輸入字段提供陰影效果。

為了使其類似于Google搜索欄，懸停時應(yīng)顯示陰影效果，因此我們將使用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>

登錄后復(fù)制