CSS表單是網(wǎng)頁設(shè)計中非常重要的一部分。其中，搜索欄是經(jīng)常使用的表單之一。這里將分享如何使用CSS來優(yōu)化搜索欄的表現(xiàn)。

首先，我們需要將搜索欄的樣式設(shè)置為居中對齊并添加邊框。以下是基本的CSS代碼：

form input[type="text"]{
width: 200px;
height: 30px;
border-radius: 14px;
border: 2px solid #ccc;
padding: 6px 10px;
margin: 0 auto;
}

接下來，我們將改善搜索欄的外觀。我們可以添加背景顏色和圖標(biāo)：

form input[type="text"]{
width: 200px;
height: 30px;
border-radius: 14px;
border: 2px solid #ccc;
padding: 6px 10px;
margin: 0 auto;
background-color: #fff;
background-image: url("https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/search-24-512.png");
background-repeat: no-repeat;
background-position: right center;
}

現(xiàn)在我們需要為搜索欄的提交按鈕添加樣式。以下是按鈕的基本CSS代碼：

form input[type="submit"]{
border: none;
background-color: #ff9900;
color: #fff;
text-transform: uppercase;
padding: 10px 20px;
border-radius: 14px;
margin: 0 auto;
display: block;
}

我們還可以添加懸停樣式：

form input[type="submit"]:hover{
background-color: #cc7a00;
cursor: pointer;
}

最后，我們可以將搜索欄設(shè)置為響應(yīng)式：

@media only screen and (max-width: 600px){
form input[type="text"]{
width: 100%;
margin: 10px auto;
}
}

以上就是使用CSS來優(yōu)化搜索欄的方法。使用這些技巧，我們可以使搜索欄更加美觀，易于使用，并適合各種屏幕尺寸。