如何使用 CSS 使 Google 搜尋欄（如輸入框）在懸停時突出顯示？
- WBOY轉載
- 2023-09-14 23:17:02977瀏覽
搜尋欄是網站設計過程中經常被忽視的組成部分，儘管消費者依靠它來存取獨特的資訊。由於搜尋欄是網站上最常用的部分之一，因此搜尋欄的設計對使用者體驗有相當大的影響。
搜尋列對於包含超過 100 頁複雜內容的網站很有用。搜尋欄用於協助客戶在企業對消費者 (B2C) 領域的大型電子商務網站、新聞網站、優惠網站和預訂網站上尋找資訊。他們也受僱於擁有多個客戶群和產品線的大型 B2B 網站。對於頁面很少的小網站來說，搜尋欄可能不是必需的，但隨著網站的發展，搜尋欄將是必不可少的。
搜尋列基本上由兩個 UI 元素組成：一個輸入欄位和一個按鈕。在本文中，我們將看到如何使用 CSS 屬性建立一個類似 Google 搜尋列的輸入框突出顯示。
Google 搜尋列
搜尋欄是任何網路瀏覽器中的一個位置，使用戶能夠透過網路搜尋所需的資訊。它還使讀者能夠在瀏覽網站的同時搜尋網站。同樣，用戶可以使用Google搜尋欄（與Google應用程式連結的搜尋小工具）從主畫面進行任何類型的搜尋。
輸入框
標籤是一個 HTML 元素，用於建立基於 Web 的互動式表單，以便使用者提交資料。根據設備和使用者的類型，有多種輸入資料類型。 元素因其各種輸入資料類型和屬性而成為 HTML 中最受歡迎和最常用的元素之一。
以下是其語法 -
<input type= "value" id= "demo" name= "demo">
注意 - 使用
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中文網其他相關文章！