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');
      });
});

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. I'm very glad that I was able to find such a programming tip, because I'm just at the beginning of the journey

    ReplyDelete
  3. Hey 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

Blogroll

Popular Posts