How-to create search bar like google using material icon
<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>
© 2025 Manajmnt code
Comments
Post a Comment
message