CodePen

HTML

            
              
  <input type="text" id="location" placeholder="Placeholder Text" />


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #location {
  font-size: 100%;
  outline: none;
  width: 200px;
  height: 30px;
  display: table-cell; 
  vertical-align: middle;
  border: 1px solid #ccc;
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#location').keypress(function() {
  
  var textLength = $(this).val().length;
  
  if(textLength < 20) {
   // Do noting 
  } else if (textLength < 40) {
      $(this).css('font-size', '85%');
  } else if (textLength > 40) {
      $(this).css('font-size', '70%');
  }
  
 //console.log(textLength);
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................