CSS中的首頁搜索框十分重要，它是網(wǎng)站中的重要功能之一，直接影響著用戶的使用體驗(yàn)。因此，我們需要用CSS來使搜索框變得更加美觀、實(shí)用和易于操作。

下面，我們來看一下如何使用CSS美化搜索框：

/* 設(shè)置搜索框的背景顏色、寬度和高度 */
#searchBox {
background-color: #fff;
width: 300px;
height: 30px;
}
/* 設(shè)置搜索框的邊框 */
#searchBox input[type=search] {
border: none;
border-bottom: 2px solid #ccc;
border-radius: 3px;
}
/* 設(shè)置搜索框的內(nèi)邊距和外邊距 */
#searchBox input[type=search] {
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
/* 設(shè)置搜索框的按鈕樣式 */
#searchBox button {
background-color: #ccc;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
/* 設(shè)置搜索框的hover效果 */
#searchBox input[type=search]:hover, #searchBox button:hover {
background-color: #f2f2f2;
}
/* 設(shè)置搜索框的active效果 */
#searchBox input[type=search]:active, #searchBox button:active {
background-color: #e6e6e6;
}

通過上面的CSS代碼，我們可以讓搜索框更加美觀，同時(shí)增強(qiáng)了搜索框的使用體驗(yàn)。當(dāng)然，這只是一個(gè)基本的搜索框樣式，我們還可以根據(jù)實(shí)際需求來進(jìn)行調(diào)整和完善。