CSS表單是網(wǎng)頁設(shè)計(jì)中必不可少的一部分，而搜索框是其中最為重要且常見的組件之一。在一個(gè)網(wǎng)站中，搜索框的作用是讓用戶更快速、方便地查找需要的信息。下面，我們將介紹如何使用CSS來美化表單搜索框。

<form action="#" method="get">
<input type="text" name="search" placeholder="搜索"/>
<button type="submit">搜索</button>
</form>

首先，我們需要先構(gòu)建出基本的搜索框代碼，如上面的代碼片段所示。在這里，我們使用了form、input和button三個(gè)元素來完成表單的搭建。

input[type="text"]{
border: none;
background: #f2f2f2;
padding: 10px;
width: 300px;
border-radius: 20px;
outline: none;
font-size: 16px;
}

接下來，我們需要對input元素進(jìn)行樣式設(shè)置。我們?nèi)サ袅怂倪吙驑邮剑O(shè)置了背景顏色、內(nèi)邊距、圓角等屬性值。同時(shí)，我們還去掉了input元素獲得焦點(diǎn)時(shí)的邊框線。

button[type="submit"]{
border: none;
background: #900c3f;
color: #fff;
padding: 10px 20px;
margin-left: -5px;
border-radius: 0 20px 20px 0;
cursor: pointer;
}

接下來，我們需要對button元素進(jìn)行樣式設(shè)置。我們?nèi)サ袅怂倪吙驑邮剑O(shè)置了背景顏色、文字顏色、內(nèi)邊距、外邊距、圓角和鼠標(biāo)指針樣式。

通過對input和button元素進(jìn)行樣式設(shè)置，我們就可以得到一個(gè)比較美觀的搜索框。其中，我們還可以根據(jù)需要進(jìn)行進(jìn)一步的樣式設(shè)置，比如在搜索框后面添加搜索icon等。