css 搜尋框怎麼變大

搜尋條在我們網站是必不可少的，尤其是在有限的頁面空間裡，放置一個重要的搜尋條是個難題，今天將結合實例給大家介紹一下如何使用CSS3來實現一個可伸縮功能的搜尋條。

結構：

    

關鍵樣式：

.demo-a input{width: 15px; border-radius: 10em; transition: all 0.5s ease 0s; }

.demo-a input:focus{width: 130px; box-shadow: 0 0 5px rgba(109,207,246,.5);}

#實際效果圖：

以上是css 搜尋框怎麼變大的詳細內容。更多資訊請關注PHP中文網其他相關文章！