資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 使 Google 搜尋欄樣式的輸入框在懸停時高亮顯示？
在設計過程中，搜尋欄通常是被網站忽略的一個元件，儘管使用者依賴它來訪問獨特的資訊。由於搜尋欄是網站上最常使用的部分之一，因此搜尋欄的設計對使用者體驗有很大影響。
對於包含超過 100 個頁面複雜內容的網站，搜尋欄非常有用。在 B2C 行業中，搜尋欄用於幫助客戶在大型電子商務網站、新聞網站、優惠網站和預訂網站上查詢資訊。它們也用於具有多個客戶細分和產品線的龐大 B2B 網站。對於頁面數量很少的小型網站，可能不需要搜尋欄，但隨著網站的增長，它將變得至關重要。
搜尋欄基本上由兩個 UI 元素組成：一個輸入欄位和一個按鈕。在本文中，我們將瞭解如何使用 CSS 屬性建立類似於 Google 搜尋欄的輸入框高亮顯示。
Google 搜尋欄
搜尋欄是任何網際網路瀏覽器中的一個位置，它使使用者能夠透過網際網路搜尋所需的資訊。它還使使用者在瀏覽網站時能夠搜尋某個網站。同樣，使用者可以使用 Google 搜尋欄（與 Google 應用關聯的搜尋小部件）從主螢幕進行任何型別的搜尋。
輸入框
<input> 標籤是一個 HTML 元素，用於建立基於 Web 的互動式表單，供使用者提交其資料。根據裝置和使用者的型別，存在多種輸入資料型別。由於其各種輸入資料型別和屬性，<input> 元素是 HTML 中最流行和最常用的元素之一。
以下是該標籤的語法：
<input type= "value" id= "demo" name= "demo">
注意 - 使用 <label> 標籤為 <input> 元素定義元素。<label> 元素的 for 屬性應與 <input> 元素的 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 屬性
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 搜尋欄的輸入框，該輸入框在懸停時會高亮顯示。
1K+ 次檢視
