首頁 > 文章 > web前端 > 如何使用 CSS 使 Google 搜尋欄（如輸入框）在懸停時突出顯示？

如何使用 CSS 使 Google 搜尋欄（如輸入框）在懸停時突出顯示？

WBOY轉載: 2023-09-14 23:17:02957瀏覽

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

搜尋欄是網站設計過程中經常被忽視的組成部分，儘管消費者依靠它來存取獨特的資訊。由於搜尋欄是網站上最常用的部分之一，因此搜尋欄的設計對使用者體驗有相當大的影響。

搜尋列對於包含超過 100 頁複雜內容的網站很有用。搜尋欄用於協助客戶在企業對消費者 (B2C) 領域的大型電子商務網站、新聞網站、優惠網站和預訂網站上尋找資訊。他們也受僱於擁有多個客戶群和產品線的大型 B2B 網站。對於頁面很少的小網站來說，搜尋欄可能不是必需的，但隨著網站的發展，搜尋欄將是必不可少的。

搜尋列基本上由兩個 UI 元素組成：一個輸入欄位和一個按鈕。在本文中，我們將看到如何使用 CSS 屬性建立一個類似 Google 搜尋列的輸入框突出顯示。

Google 搜尋列

搜尋欄是任何網路瀏覽器中的一個位置，使用戶能夠透過網路搜尋所需的資訊。它還使讀者能夠在瀏覽網站的同時搜尋網站。同樣，用戶可以使用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 搜尋欄（如輸入框）在懸停時突出顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html 数据类型 for 伪类 ui

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：SASS @import 函數有什麼用？下一篇：SASS @import 函數有什麼用？

看更多