title: How to create input text fields with custom caret and text behavior?
body: <p>Recently, I visited a wallpaper sharing website <strong><a href="http://wallbase.cc/" rel="nofollow noreferrer">wallbase</a></strong>. The first thing I noticed was the search box. The text input box has a nice css gradient styling. But more interesting is the behavior of its text input caret. It is a white, bright, shiny one. Also the behavior of input text is also customized.</p>
  
  <p>I don't know how it is achieved, and I think it may be possible with CSS along with JavaScript. Can somebody explain the way it is achieved? I am attaching a screenshot below:</p>
  
  <p><img src="https://i.stack.imgur.com/Wpjlb.jpg" alt="enter image description here"></p>