This is small code snippet for quick use. Observe below image. Those search and reset icons are from font-awesome library
Include below libraries
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
Markup
Here slinput class wraps up search icon, reset icon and text box
<div class="slinput" ng-init=""> <i class="fa fa-search left-icon"></i> <input placeholder="Search here" ng-model="searchInputVal"/> <i ng-class="{'fa' : true, 'fa-close' : true, 'right-icon' : true, active : (searchInputVal.length > 0)}" ng-click="searchInputVal = ''"></i> </div>
CSS
/* padding left and right is for search and reset icons */ .slinput input { padding:10px; width:100%; border:1px solid #ccc; padding-left:31px; padding-right:30px; color:black; font-family: arial,sans-serif; font-size: 16px; } /* Remove IE10's “clear field” X button */ .slinput input::-ms-clear { display: none; } .slinput input:focus { border:1px solid #4d90fe; } /* left side icon style (search icon) */ .slinput .left-icon { position:absolute; left:10px; top:11px; } .slinput .fa { color:#444; font-size: 16px; } .slinput .fa-close { color:#ccc; }.slinput .active { color:#555; }/* right side icon style (search icon) */ .slinput .right-icon { position:absolute; right:10px; top:11px; cursor:pointer; } .slinput { position:relative; width:100%; }
0 comments:
Post a Comment