搜索欄是網站設計過程中經常被忽視的組成部分，盡管消費者依靠它來訪問獨特的信息。由于搜索欄是網站上最常用的部分之一，因此搜索欄的設計對用戶體驗有相當大的影響。
搜索欄對于包含超過 100 頁復雜內容的網站很有用。搜索欄用于幫助客戶在企業對消費者 (B2C) 領域的大型電子商務網站、新聞網站、優惠網站和預訂網站上查找信息。他們還受雇于擁有多個客戶群和產品線的大型 B2B 網站。對于頁面很少的小網站來說，搜索欄可能不是必需的，但隨著網站的發展，搜索欄將是必不可少的。
搜索欄基本上由兩個 UI 元素組成：一個輸入字段和一個按鈕。在本文中，我們將看到如何使用 CSS 屬性創建一個類似于 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 搜索欄（如輸入框）在懸停時突出顯示？的詳細內容，更多請關注www.92cms.cn其它相關文章！
