首頁 > web前端 > css教學 > css 搜尋框怎麼變大

css 搜尋框怎麼變大

anonymity
發布: 2019-05-28 11:28:52
原創
8617 人瀏覽過

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

css 搜尋框怎麼變大

結構:


    

關鍵樣式:

.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 搜尋框怎麼變大

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

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板