搜尋欄是網站設計過程中經常被忽視的組成部分,儘管消費者依靠它來存取獨特的資訊。由於搜尋欄是網站上最常用的部分之一,因此搜尋欄的設計對使用者體驗有相當大的影響。
搜尋列對於包含超過 100 頁複雜內容的網站很有用。搜尋欄用於協助客戶在企業對消費者 (B2C) 領域的大型電子商務網站、新聞網站、優惠網站和預訂網站上尋找資訊。他們也受僱於擁有多個客戶群和產品線的大型 B2B 網站。對於頁面很少的小網站來說,搜尋欄可能不是必需的,但隨著網站的發展,搜尋欄將是必不可少的。
搜尋列基本上由兩個 UI 元素組成:一個輸入欄位和一個按鈕。在本文中,我們將看到如何使用 CSS 屬性建立一個類似 Google 搜尋列的輸入框突出顯示。
搜尋欄是任何網路瀏覽器中的一個位置,使用戶能夠透過網路搜尋所需的資訊。它還使讀者能夠在瀏覽網站的同時搜尋網站。同樣,用戶可以使用Google搜尋欄(與Google應用程式連結的搜尋小工具)從主畫面進行任何類型的搜尋。
標籤是一個 HTML 元素,用於建立基於 Web 的互動式表單,以便使用者提交資料。根據設備和使用者的類型,有多種輸入資料類型。 元素因其各種輸入資料類型和屬性而成為 HTML 中最受歡迎和最常用的元素之一。
以下是其語法 -
1 |
|
注意 - 使用
:hover 是 CSS 的偽類,它使用戶能夠知道定點設備已單擊或在該特定元素上移動。例如,如果您將滑鼠懸停在頁面上的某個元素上,其字體顏色或背景顏色可能會根據指定的 CSS 屬性而變化。
查看以下範例 -
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
將滑鼠懸停在「按鈕」元素上後,其中文字的顏色將從藍色變為紅色。此外,文字的字體大小也會增加。
box-shadow 屬性使開發人員能夠向元素應用一個或多個陰影。只需用逗號分隔即可指派多個效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
為了建立像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 |
|
在本文中,我們討論瞭如何建立一個類似於 Google 搜尋欄的輸入框,該輸入框在懸停時會突出顯示。
以上是如何使用 CSS 使 Google 搜尋欄(如輸入框)在懸停時突出顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!