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

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

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

通過上面的CSS代碼，我們可以讓搜索框更加美觀，同時增強了搜索框的使用體驗。當然，這只是一個基本的搜索框樣式，我們還可以根據實際需求來進行調整和完善。