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

2 comments:

  1. Thanks for sharing informative content…Find best digital marketing company to know more and Contact us on given no.…

    ReplyDelete
  2. 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

Blogroll

Popular Posts