在網(wǎng)頁制作中，搜索框是不可或缺的元素之一。為了使搜索框更加美觀、引人注目，我們可以使用CSS樣式對搜索框進(jìn)行樣式美化。本文將介紹如何使用CSS實現(xiàn)搜索框的變色效果。

/* CSS代碼 */
input[type="text"] {
background-color: #fff;
border: 2px solid #ccc;
border-radius: 5px;
padding: 5px;
transition: all 0.3s ease-in-out; /* 添加漸變效果 */
}
input[type="text"]:focus {
background-color: #e0e0e0;
border: 2px solid #666;
}

上述代碼使用了CSS的屬性選擇器，對type為text的輸入框進(jìn)行了樣式設(shè)置。將輸入框的background-color設(shè)置為白色，border為2像素的灰色，圓角半徑為5像素，內(nèi)邊距為5像素。同時，為了增加用戶體驗，添加了漸變效果。 在輸入框獲得焦點時，使用:focus偽類對輸入框進(jìn)行設(shè)置，將輸入框的background-color改為淺灰色，border為2像素的深灰色。這里的:focus偽類可以增強用戶交互體驗，當(dāng)用戶點擊輸入框時，輸入框的顏色會改變，提醒用戶輸入內(nèi)容。 在實際開發(fā)項目中，可以根據(jù)需求調(diào)整輸入框的顏色、邊框等樣式，增加不同的樣式美化效果。