在網站設計中，搜索框是一個重要的組件。如果你想讓你的搜索框看起來更加專業和吸引人，那么使用CSS來設計樣式是一個很好的選擇。 CSS可以用來控制每個搜索框的樣式。你可以設置搜索框的大小、字體、顏色和邊框等屬性。下面我們來看看具體如何寫CSS樣式。 首先，我們需要一個HTML搜索框。可以使用一個input標簽，并為其添加一個ID。這樣我們就可以使用CSS來控制這個搜索框的樣式。以下是一個基本的HTML搜索框：

<input type="text" id="search" placeholder="Search">

接下來，我們可以使用CSS來控制搜索框的樣式：

/* 樣式搜索框 */
#search {
width: 200px;
height: 30px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
padding: 5px;
color: #666;
}
/* 當聚焦時，修改顏色 */
#search:focus {
outline: none;
border-color: #66afe9;
box-shadow: 0 0 5px #66afe9;
}

以上CSS代碼會將搜索框的寬度設置為200px，高度設置為30px。搜索框的邊框為2px實線，顏色為#ccc。搜索框也被設置為圓角5px。 搜索框的字體大小被設置為16px，并添加了一些填充，以使文本與邊框之間有一些間距。搜索框的文字顏色被設置為#666。 最后，當搜索框被聚焦時，邊框和陰影顏色都會改變。 通過使用上述CSS樣式，我們可以讓搜索框更加美觀和專業。好的搜索框可以讓用戶更容易找到他們正在尋找的信息，從而提高網站的質量和可用性。