這篇文章要介紹，如何使用 HTML 和 CSS 創建一個美觀的搜尋框

HTML

創建一個 search-container 的容器

<div class="search-container">
    <input type="text" class="search-input" placeholder="搜索...">
    <button class="search-button">搜尋</button>
</div>

• input : 標籤會顯示一個輸入框，讓使用者輸入搜索內容

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中顯示，確保位於畫面正中間

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0; 
    font-family: 'Helvetica', 'Arial', sans-serif; 
}

2. 搜尋容器樣式

使用 Flexbox 控制搜尋容器內部的佈局，把搜尋框與搜尋按鈕水平排列為一行

.search-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 25px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
    overflow: hidden; 
}

• border-radius : 設置容器的圓角半徑，讓搜尋框的四角變得圓滑
• box-shadow : 添加輕微的陰影效果，增添一些立體感
• overflow : 隱藏任何超出容器邊界的內容，確保圓角效果與內容保持一致

3. 搜尋輸入框樣式

.search-input {
    border: none; 
    outline: none; 
    padding: 10px 20px; 
    font-size: 16px; 
    border-radius: 25px; 
    transition: all 0.3s ease; 
}

.search-input::placeholder {
    color: #999; 
}

• search-input : 為輸入框的主要樣式
  • border : 移除預設的邊框，讓輸入框看起來更加簡潔
  • outline : 當點擊或聚焦輸入框時，移除預設的外輪廓
  • border-radius : 設定輸入框的圓角
  • transition : 設置所有的樣式變化時間為 0.3 秒，並使用 ease 實現平滑的過渡效果
• search-input::placeholder : 設定輸入框內提示文字的樣式

4. 搜尋按鈕樣式

.search-button {
    background: linear-gradient(45deg, #ff7e5f, #feb47b); 
    color: #fff; 
    border: none; 
    border-radius: 25px; 
    padding: 10px 20px; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}

• border : 移除預設的邊框
• border-radius : 設定按鈕的邊角為圓角，與搜尋框保持一致的圓角設計
• cursor: 設定鼠標懸停時顯示為「手型指標」，表示按鈕可點擊
• transition : 按鈕在進行位移或縮放等變化時間為 0.3 秒，並使用ease 實現平滑的過渡效果

5. 搜尋按鈕的懸停效果

.search-button:hover {
    transform: translateY(-3px); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); 
}

• transform : 將按鈕在垂直方向上，向上移動 3 像素
• box-shadow : 為按鈕添加陰影效果，讓按鈕有立體感

結果呈現