CSS搜索框的放大鏡常常被用來(lái)增強(qiáng)網(wǎng)站的用戶體驗(yàn),使得搜索框更加易用和美觀。放大鏡的制作原理并不復(fù)雜,下面,我們來(lái)學(xué)習(xí)一下讓搜索框更優(yōu)美的CSS技巧。
.search-bar { width: 300px; height: 32px; border: 1px solid #ccc; border-radius: 16px; position: relative; } .search-bar input[type="text"] { width: 100%; height: 100%; border: none; outline: none; padding-left: 16px; padding-right: 32px; box-sizing: border-box; } .search-bar .fa-search { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #ccc; }
首先,我們要?jiǎng)?chuàng)建一個(gè)搜索框容器,可以用div或者form標(biāo)簽。為搜索框容器設(shè)置寬度、高度、邊框等屬性,這里我們?cè)O(shè)置其為300px寬,32px高,邊框?yàn)?px,圓角16px。然后,我們?cè)谌萜鲀?nèi)創(chuàng)建一個(gè)輸入框input,并設(shè)置其寬度100%、高度100%、無(wú)邊框、無(wú)外輪廓等基本屬性,讓搜索框看起來(lái)更加簡(jiǎn)單明了。
最后,我們?cè)谒阉骺蛉萜鲀?nèi)添加一個(gè)放大鏡圖標(biāo),使用font-awesome圖標(biāo)庫(kù)中的"fa-search"。通過(guò)position屬性將該圖標(biāo)定位到搜索框容器的右側(cè),并使用transform屬性將圖標(biāo)垂直居中。為了保證搜索結(jié)果的可讀性和美觀性,我們將圖標(biāo)顏色設(shè)置為#ccc,與搜索框邊框顏色保持一致。
至此,我們就完成了CSS搜索框放大鏡的樣式設(shè)置。如果還需要添加其他交互特效,可以使用JavaScript與CSS結(jié)合實(shí)現(xiàn)。