分享8款純CSS3實(shí)現(xiàn)的搜索框功能
發(fā)布時(shí)間:2017-09-14 09:43:37 作者:佚名
我要評(píng)論

本文通過(guò)實(shí)例代碼給大家分享8款純CSS3實(shí)現(xiàn)的搜索框功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
效果圖:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>8款純CSS3搜索框</title> <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #494A5F; font-weight: 500; font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; } #container { width: 500px; height: 820px; margin: 0 auto; } div.search {padding: 30px 0;} form { position: relative; width: 300px; margin: 0 auto; } input, button { border: none; outline: none; } input { width: 100%; height: 42px; padding-left: 13px; padding-right:46px; } button { height: 42px; width: 42px; cursor: pointer; position: absolute; } /*搜索框1*/ .bar1 {background: #A3D0C3;} .bar1 input { border: 2px solid #7BA7AB; border-radius: 5px; background: #F9F0DA; color: #9E9C9C; } .bar1 button { top: 0; right: 0; background: #7BA7AB; border-radius: 0 5px 5px 0; } .bar1 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } /*搜索框2*/ .bar2 {background: #DABB52;} .bar2 input, .bar2 button { border-radius: 3px; } .bar2 input { background: #F9F0DA; } .bar2 button { height: 26px; width: 26px; top: 8px; right: 8px; background: #F15B42; } .bar2 button:before { content: "\f105"; font-family: FontAwesome; color: #F9F0DA; font-size: 20px; font-weight: bold; } /*搜索框3*/ .bar3 {background: #F9F0DA;} .bar3 form {background: #A3D0C3;} .bar3 input, .bar3 button { background: transparent; } .bar3 button { top: 0; right: 0; } .bar3 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } /*搜索框4*/ .bar4 {background: #F15B42;} .bar4 form { background: #F9F0DA; border-bottom: 2px solid #BE290E; } .bar4 input, .bar4 button { background: transparent; } .bar4 button { top: 0; right: 0; } .bar4 button:before { content: "\f178"; font-family: FontAwesome; font-size: 20px; color: #be290e; } /*搜索框5*/ .bar5 {background: #683B4D;} .bar5 input, .bar5 button { background: transparent; } .bar5 input { border: 2px solid #F9F0DA; } .bar5 button { top: 0; right: 0; } .bar5 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } .bar5 input:focus { border-color: #311c24 } /*搜索框6*/ .bar6 {background: #F9F0DA;} .bar6 input { border: 2px solid #c5464a; border-radius: 5px; background: transparent; top: 0; right: 0; } .bar6 button { background: #c5464a; border-radius: 0 5px 5px 0; width: 60px; top: 0; right: 0; } .bar6 button:before { content: "搜索"; font-size: 13px; color: #F9F0DA; } /*搜索框7*/ .bar7 {background: #7BA7AB;} .bar7 form { height: 42px; } .bar7 input { width: 250px; border-radius: 42px; border: 2px solid #324B4E; background: #F9F0DA; transition: .3s linear; float: right; } .bar7 input:focus { width: 300px; } .bar7 button { background: none; top: -2px; right: 0; } .bar7 button:before{ content: "\f002"; font-family: FontAwesome; color: #324b4e; } /*搜索框8*/ .bar8 {background: #B46381;} .bar8 form { height: 42px; } .bar8 input { width: 0; padding: 0 42px 0 15px; border-bottom: 2px solid transparent; background: transparent; transition: .3s linear; position: absolute; top: 0; right: 0; z-index: 2; } .bar8 input:focus { width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA; } .bar8 button { background: #683B4D; top: 0; right: 0; } .bar8 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; } </style> </head> <body> <div id="container"> <div class="search bar1"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar2"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar3"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar4"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar5"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar6"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar7"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> <div class="search bar8"> <form> <input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容..."> <button type="submit"></button> </form> </div> </div> </body> </html>
總結(jié)
以上所述是小編給大家介紹的 分享8款純CSS3實(shí)現(xiàn)的搜索框功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能
這篇文章主要介紹了基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-09css3的動(dòng)畫特效之動(dòng)畫序列(animation)
這篇文章主要介紹了css3的動(dòng)畫特效之動(dòng)畫序列(animation) 的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-22CSS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)
純CSS實(shí)現(xiàn)動(dòng)畫效果:鼠標(biāo)移上圖標(biāo)顯示搜索框,鼠標(biāo)移出隱藏搜索框,這種效果給用戶帶來(lái)很好的體驗(yàn)效果,下面小編給大家?guī)?lái)了CSS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)的完整2021-07-19