搜索框是網頁設計中常用的元素之一，它為用戶提供了方便快捷的搜索功能，為網站的用戶體驗增加了不少的價值。而如何插入一個漂亮的搜索框，也是我們在美化網站時需要考慮的問題之一。下面，我們來看看如何使用 CSS 來創建一個簡單的搜索框。

<input type="text" placeholder="搜索">

上面的代碼是搜索框最基本的代碼。我們可以在 <input> 標簽里設置 type 和 placeholder 屬性來確定搜索框的類型和默認提示文字。接下來，我們來美化一下這個搜索框。

input[type="text"] {
border: 2px solid #ccc;
border-radius: 30px;
font-size: 16px;
padding: 10px;
width: 300px;
}
input[type="text"]:focus {
border-color: #007bff;
outline: none;
}

上面的代碼是我們為搜索框添加的 CSS 樣式。我們使用 input[type="text"] 選擇器來選定所有的文本輸入框，然后設置了邊框、邊框圓角、字體大小、內邊距和寬度等樣式。當用戶在搜索框中輸入內容并聚焦時，我們使用 input[type="text"]:focus 選擇器來為其添加一個藍色的邊框，并移除默認的外邊框。

使用 CSS 美化搜索框是一種簡單而有效的方法，可以讓我們的搜索框看起來更加美觀和實用。當然，在實際應用中，還可以根據需要添加更多的樣式和功能，讓搜索框更加適合我們的網站。