Search bar like google in HTML and CSS

1 minute read

How to Create a Search Bar Like Google :

Example :

Click on Search icon (top right corner) to get a demo.

HTML

<img class="searchlogo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9xOSHytcPi_-RnQM00xI_1b0ff1gzR2JqFa4J8C6VjbZG-x8-RzUF9krQ7vp_IF9vQ1oF0T4hbBPFzfaX42Xjmot0shxr-0IcmNhRXSR7xAwkZm22U9xtDUgT6ser076gzVpweKsNMb9a/s1600/logo.png" width="70%"/>
<br/>
<div class="searchpage1">
<form action='/search' method='get' role='search'>
  <div class="searchstyle">
    <img class="searchicon" src="https://iconarchive.com/download/i12388/gakuseisean/ivista-2/Start-Menu-Search.ico" width="20px"/>
    <input class="searchbox1" name='q'
    placeholder='Search Here...' spellcheck='false' type='text'/>
  </div>
  <br/>
  <div class="sbtn">
    <input type='submit' class="searchbtn" value='Plus Search'/>
    <button onclick="window.open('')" class="searchbtn">I'm Feeling Lucky</button>
</div>
  </form>
</div>

CSS

HTML