CSS是網頁設計中一個十分重要的工具，它可以給網頁添加各種樣式。在設計網頁時，有時需要添加一個搜索欄。下面就來介紹下如何使用CSS來設置搜索欄。

首先，在HTML中定義一個搜索框。如下所示：

<input type="text" id="search" name="search" placeholder="輸入搜索內容">

接下來，可以通過CSS將搜索框進行樣式設置，如下所示：

#search {
width: 300px; /*搜索框寬度*/
height: 30px; /*搜索框高度*/
border: none; /*去掉邊框*/
background-color: #f2f2f2; /*背景顏色*/
color: #333; /*字體顏色*/
font-size: 14px; /*字體大小*/
padding: 5px; /*內邊距*/
}

這樣就可以將搜索框進行樣式設置了。但是如果想要將搜索框與搜索按鈕放在同一行，可以使用CSS的flex布局，如下所示：

.form {
display: flex; /*flex布局*/
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
#search {
/*搜索框樣式設置*/
}
#submit {
width: 80px; /*搜索按鈕寬度*/
height: 30px; /*搜索按鈕高度*/
margin-left: 10px; /*左側間距*/
background-color: #337ab7; /*背景顏色*/
color: #fff; /*字體顏色*/
font-size: 14px; /*字體大小*/
border: none; /*去掉邊框*/
cursor: pointer; /*鼠標變成手形*/
}

以上就是使用CSS設置搜索欄的方法。在實際應用中，還可以通過CSS實現搜索框聚焦時樣式的變化，以及搜索結果列表的樣式設置等功能。