CSS搜索輸入框是Web開發中常用的一個組件，它可以讓用戶快速地輸入并搜索需要的內容，提高了用戶體驗。下面我們就來介紹一下如何使用CSS來創建一個搜索輸入框。

搜索輸入框HTML結構：
<div class="search-box">
<input type="text" class="search-input" placeholder="請輸入關鍵詞">
<button class="search-btn">搜索</button>
</div>

上述代碼中我們創建了一個名為search-box的div容器，里面包含一個搜索輸入框和一個搜索按鈕。接下來我們就來使用CSS來美化這個搜索輸入框。

CSS樣式：
/* 搜索輸入框樣式 */
.search-box {
position: relative; /* 相對定位 */
display: inline-block;
}
.search-input {
width: 200px; /* 寬度 */
padding: 8px 10px; /* 內邊距 */
border: 1px solid #ddd; /* 邊框 */
border-radius: 4px; /* 圓角 */
outline: none; /* 去除默認輪廓 */
font-size: 16px; /* 字體大小 */
}
.search-input:focus {
border-color: #66afe9; /* 聚焦時設置邊框顏色 */
}
.search-btn {
position: absolute; /* 絕對定位 */
top: 0;
right: 0;
padding: 8px 12px;
background-color: #428bca;
border: none;
color: #fff;
font-size: 16px;
border-top-right-radius: 4px; /* 圓角 */
border-bottom-right-radius: 4px;
cursor: pointer;
}
.search-btn:hover {
background-color: #3071a9; /* 鼠標懸停時改變背景色 */
}

上述代碼中我們設置了搜索輸入框的寬度、內邊距、邊框、圓角和字體大小等樣式，還為輸入框聚焦時設置了邊框顏色。按鈕樣式也通過絕對定位、背景色、邊框、圓角等屬性進行設置，并為鼠標懸停時設置了背景色。

通過上述代碼我們就可以創建出一個樣式美觀、功能完善的搜索輸入框組件，可以應用在各種網站中提高用戶體驗。希望大家可以通過這篇文章了解到CSS搜索輸入框的實現方法。