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

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

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

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;
}

上面的代碼是我們?yōu)樗阉骺蛱砑拥?CSS 樣式。我們使用 input[type="text"] 選擇器來選定所有的文本輸入框，然后設(shè)置了邊框、邊框圓角、字體大小、內(nèi)邊距和寬度等樣式。當(dāng)用戶在搜索框中輸入內(nèi)容并聚焦時，我們使用 input[type="text"]:focus 選擇器來為其添加一個藍(lán)色的邊框，并移除默認(rèn)的外邊框。

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