Today I am going to show to how to create Cool Search Bar with Css and Html.
👉Css
- Just use this simple Css ,In Blogger Go to Themes and Edit Html and Paste this Css Just above </head>.
<style>
#search-fs{position:relative;overflow:hidden;margin:2px auto;width:600px;max-width:100%}
#search-fs .fa{position:absolute;left:6%;top:40%;color:#555}
#search-fs input#search-text{border:0;box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);padding:20px 15px 20px 60px;margin:12px;border-radius:70px;width:500px;font-family:'Google Sans';font-size:16px;max-width:100%;outline:none}
#search-fs button{background:#fbdc03;border:none;color:#000;font-family:'Google Sans';text-transform:uppercase;font-weight:700;position:absolute;top:0;right:0;padding:15px 30px;border-radius:30px;margin:20px;cursor:pointer;outline:none}
#search-fs button:hover{background:#0774ff;color:#fff;transition:all .4s}
</style>
- Now You have add Font Aesome Icons Css by Pasting Below Code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
👉Implement
- Just Use Below Html to Inplement This anywhere you want.
<center>
<div id='search-box' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WebSite'>
<form action='/search' id='search-fs' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' query-input='required'>
<i aria-hidden='true' class='fa fa-search'></i>
<input id='search-text' itemprop='query-input' name='q' placeholder='Search here' required='' type='text' value=''/>
<input name='max-results' type='hidden' value='9'/>
<button type='submit'>Search</button></form></div>
</center>
Checkout It's Demo
See the Pen Smooth Site Header Search Bar by K K UPGRADER (@kkupgrader) on CodePen.