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'); }); });
This comment has been removed by the author.
ReplyDeleteI'm very glad that I was able to find such a programming tip, because I'm just at the beginning of the journey
ReplyDeleteHey everyone! I stumbled upon this amazing collection of leading-edge photos on Depositphotos that I believe could add a fantastic visual element to the search boxes we've been discussing. Check out the leading images at Depositphotos. Integrating captivating visuals not only enhances the user experience but also adds a touch of creativity to our designs. As we explore ways to improve search box functionalities, incorporating visually appealing elements could be a game-changer. Let's discuss how we can balance functionality with aesthetics to create a more engaging user interface. What are your thoughts? Looking forward to hearing your ideas!
ReplyDelete