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/jquery/1.11.3/jquery.min.js"></script>
Markup
Here slinput class wraps up search icon, reset icon and text box
<div class="slinput"> <i class="fa fa-search left-icon"></i> <input placeholder="Search here" /> <i class="fa fa-close right-icon"></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; } /* right side icon style (search icon) */ .slinput .right-icon { position:absolute; right:10px; top:11px; cursor:pointer; } .slinput { position:relative; width:100%; }
jQuery
$(function(){ // if text box value is not null, then darken reset icon $(".slinput input").keyup(function(){ var val = $(this).val(); if(val.length > 0) { $(this).parent().find(".right-icon").css('color','#555'); } else { $(this).parent().find(".right-icon").css('color','#ccc'); } }); // if user click on reset icon, clear text field $(".slinput .right-icon").click(function(){ $(this).parent().find("input").val(''); $(this).css('color','#ccc'); }); });
It became easier for me that now they can write an essay for me, I found a source where they will tell you about any reliable and inexpensive service for the flawless performance of your tasks
ReplyDelete