最近在做一個電商網站的項目，需要實現商品的分類搜索功能。為了讓用戶體驗更加友好，我們決定使用CSS來美化搜索框。下面我就來給大家介紹一下如何使用CSS實現輸入框分類搜索。 首先，我們需要在HTML中添加一個輸入框和一個下拉列表，用于選擇商品分類。代碼如下所示：

<form>
<input type="text" placeholder="請輸入關鍵詞">
<select>
<option value="0">所有分類</option>
<option value="1">服裝</option>
<option value="2">鞋靴</option>
<option value="3">箱包</option>
</select>
</form>

接下來，我們就可以使用CSS來美化這個輸入框了。首先，我們給整個表單添加一個樣式，讓其居中顯示并設置寬度為80%：

<style>
form {
display: flex;
justify-content: center;
width: 80%;
margin: auto;
}
</style>

然后，我們使用CSS來美化輸入框和下拉列表。我們給輸入框添加一個padding和border，讓其看起來更加美觀。同時，我們也給下拉列表添加了一些樣式，使其更加美觀。代碼如下所示：

<style>
input[type="text"] {
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select {
width: 30%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.2929 1.2929C9.6534 0.9324 10.2206 0.9047 10.6129 1.2097L10.7071 1.2929C11.0676 1.6534 11.0953 2.2206 10.7903 2.6129L10.7071 2.7071L6.7071 6.7071C6.3466 7.0676 5.7794 7.0953 5.3871 6.7903L5.2929 6.7071L1.2929 2.7071C0.9024 2.3166 0.9024 1.6834 1.2929 1.2929C1.6834 0.9024 2.3166 0.9024 2.7071 1.2929L5 3.5858L7.2929 1.2929C7.6834 0.9024 8.3166 0.9024 8.7071 1.2929L9.2929 1.8787L9.2929 1.2929Z' fill='%23333333'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
</style>

最后，我們還可以添加一些鼠標懸停的效果和過渡效果，使用戶體驗更加友好。代碼如下所示：

<style>
input[type="text"]:hover, select:hover {
border-color: #333;
}
input[type="text"], select {
transition: .3s ease-in-out;
}
</style>

通過上面的步驟，我們就成功地使用CSS實現了輸入框分類搜索的功能。如果您還有其他相關問題，歡迎跟我們聯系。