CSS格式化搜索框是網站中常見的一種搜索框樣式。通過合適的CSS樣式，可以讓搜索框更加美觀和易于使用。下面我們介紹一下如何使用CSS格式化搜索框。

// HTML代碼
<form class="search-form">
<input type="text" class="search-input" placeholder="輸入關鍵詞...">
<button type="submit" class="search-btn">搜索</button>
</form>
// CSS代碼
.search-form {
display: flex;
align-items: center;
justify-content: center;
}
.search-input {
border: none;
font-size: 16px;
padding: 10px;
width: 200px;
border-radius: 20px;
box-shadow: 0px 0px 5px gray;
}
.search-btn {
background-color: #2196F3;
color: white;
font-size: 16px;
padding: 10px;
margin-left: 10px;
border: none;
border-radius: 20px;
box-shadow: 0px 0px 5px gray;
}
// 備注：以上僅為示例代碼，僅供參考使用

首先，在HTML代碼中創建一個form表單，并在其中添加input和button元素。我們可以通過給元素添加class，方便在CSS中選擇樣式。這樣寫還可以使頁面結構更加清晰易懂。

然后，在CSS樣式表中添加對應樣式。我們使用了flex布局來使搜索框和按鈕水平居中。search-input和search-btn分別對輸入框和按鈕進行樣式設置。這里我們去掉了輸入框和按鈕的邊框，使其更加美觀；同時，為輸入框設置了圓角和陰影效果等。search-btn中，我們設置了背景顏色、字體大小、填充、邊框等樣式。

除了以上給出的示例代碼，還可以根據實際需求進行調整。比如：背景顏色、字體大小、圓角大小等樣式都可以根據自己的需要進行調整。

最后，一個簡單而美觀的CSS格式化搜索框就完成啦！