在CSS3中,您可以使用background-image
屬性為搜索框添加圖片,以下是一個(gè)簡(jiǎn)單的示例:
HTML代碼:
<input type="text" class="search-box">
CSS代碼:
.search-box { background-image: url('search_icon.png'); background-repeat: no-repeat; background-position: left center; padding-left: 20px; }
在這個(gè)示例中,我們假設(shè)search_icon.png
是搜索圖標(biāo)的圖片路徑。background-repeat: no-repeat;
表示圖片不會(huì)重復(fù),background-position: left center;
表示圖片在搜索框的左側(cè)居中顯示,padding-left: 20px;
則表示搜索框的左側(cè)內(nèi)邊距為20像素,這樣可以讓搜索框和搜索圖標(biāo)之間有一定的距離。
您可以根據(jù)自己的需求調(diào)整圖片路徑、重復(fù)方式、位置以及內(nèi)邊距等樣式屬性,以達(dá)到更好的效果,也可以考慮使用其他CSS屬性來(lái)進(jìn)一步美化搜索框,如設(shè)置邊框、圓角等。