How-to create search bar like google using material icon

In this example, we learn how to create search bar with icon like google, we use table tag and material icon library to do this.

<link href="//fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet"> <style> #search-bar { box-shadow: 0 0 2px 0; padding: 3px 10px; border-radius: 22px; color: #545454;margin:0 auto } input[type="search"] { height: 26px; border: 0; } input[type="search"]:focus { outline: 0; } </style> <table id="search-bar"> <tbody> <tr><td><span class="icon-asset material-icons-outlined ng-star-inserted">search</span></td><td><form action="" style="margin-block-end: 0;"><input type="search" placeholder="search..." autocomplete="off" /></form></td><td><span class="material-icons-outlined ng-star-inserted" title="Search by voice" style="cursor: pointer;">mic</span></td><td><span class="material-icons-outlined ng-star-inserted" style="cursor: pointer;">search</span></td></tr> </tbody> </table>

© Manajmnt code

Share to :

☷✎