首頁 > web前端 > css教學 > 如何使用 CSS 使 Google 搜尋欄(如輸入框)在懸停時突出顯示?

如何使用 CSS 使 Google 搜尋欄(如輸入框)在懸停時突出顯示?

WBOY
發布: 2023-09-14 23:17:02
轉載
1006 人瀏覽過

如何使用 CSS 使 Google 搜索栏(如输入框)在悬停时突出显示?

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

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

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

Google 搜尋列

搜尋欄是任何網路瀏覽器中的一個位置,使用戶能夠透過網路搜尋所需的資訊。它還使讀者能夠在瀏覽網站的同時搜尋網站。同樣,用戶可以使用Google搜尋欄(與Google應用程式連結的搜尋小工具)從主畫面進行任何類型的搜尋。

輸入框

標籤是一個 HTML 元素,用於建立基於 Web 的互動式表單,以便使用者提交資料。根據設備和使用者的類型,有多種輸入資料類型。 元素因其各種輸入資料類型和屬性而成為 HTML 中最受歡迎和最常用的元素之一。

以下是其語法 -

1

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

登入後複製

注意 - 使用

CSS 懸停屬性

:hover 是 CSS 的偽類,它使用戶能夠知道定點設備已單擊或在該特定元素上移動。例如,如果您將滑鼠懸停在頁面上的某個元素上,其字體顏色或背景顏色可能會根據指定的 CSS 屬性而變化。

範例

查看以下範例 -

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!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 屬性使開發人員能夠向元素應用一個或多個陰影。只需用逗號分隔即可指派多個效果。

範例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!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懸停屬性。

範例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<!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中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板