title: How can I create a searchbar like this?
body: <p>I really like the search bar on this website, <a href="https://www.marmosetmusic.com/" rel="nofollow">https://www.marmosetmusic.com/</a>  </p>
  
  <p>I can do it very basically using CSS steps animation but it doesn't look smooth and I have to change the timing based on the length of the placeholder.</p>
  
  <p>Also, I am not sure how to overlay it as such over an image or parallax design.</p>
  
  <p>What I have tried is:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;title&gt;Search&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="css/normalize.css"&gt;
  
      &lt;link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="css/type-style.css" media="screen" type="text/css" /&gt;
  
      &lt;script src="js/modernizr.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;h1&gt;
    &lt;i class='fa fa-anchor'&gt;&lt;/i&gt;
    Test.com
  &lt;/h1&gt;
  &lt;div class='overlay'&gt;&lt;/div&gt;
  &lt;div class='wrapper'&gt;
    &lt;form class='search'&gt;
      &lt;input placeholder="search..." required='true' type='text'&gt;
      &lt;button class='search-button'&gt;
        &lt;i class='fa fa-search'&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
    &lt;script src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400);
  body {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/holidayphoto.jpg);
    background-position: 0 90%;
    overflow: hidden;
  }
  
  body, html {
    height: 100%;
  }
  
  h1 {
    color: #fff;
    font-size: 3.5em;
    text-align: center;
    font-family: 'Alegreya Sans SC', sans-serif;
    padding: 20px;
    font-weight: 300;
    opacity: 1;
  }
  h1 i {
    color: #e74c3c;
  }
  
  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background: #000;
    opacity: 0.92;
    top: 0;
    left: 0;
  }
  
  .wrapper {
    width: 560px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -280px;
    margin-top: -20px;
    -webkit-font-smoothing: antialiased;
    z-index: 999999;
  }
  
  input[type="text"] {
    font-family: 'Alegreya Sans SC', sans-serif;
    width: 480px;
    height: 40px;
    padding: 10px 0 10px 20px;
    font-size: 24px;
    font-weight: 300;
    color: #eee;
    background: #222;
    border: none;
    float: left;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  
  input:focus {
    color: #fff;
    outline: none;
    background: #1a1a1a;
  }
  
  button[type="submit"], .search-button {
    border: 0;
    width: 60px;
    height: 60px;
    background: #222222;
    border-left: solid 5px #222222;
    text-align: center;
    float: left;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  button[type="submit"] i, .search-button i {
    color: #fff;
    font-size: 40px;
    line-height: 1.4em;
  }
  
  .search-button:focus {
    outline: none;
  }
  
  .search-button:hover {
    background: #e53f2e;
    border-left: #e53f2e;
  }
  
  .switch-wrapper {
    font-family: 'Alegreya Sans SC', sans-serif;
    width: 70px;
    height: 40px;
    margin: 10px;
    border-radius: 40px;
    position: absolute;
    background: #444;
    right: 118px;
    cursor: pointer;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  .switch-wrapper:before {
    position: absolute;
    content: 'FLIGHT';
    line-height: 2.7em;
    left: -54px;
  }
  .switch-wrapper:after {
    position: absolute;
    content: '+ HOTEL';
    line-height: 2.7em;
    right: -60px;
  }
  .switch-wrapper .switch {
    width: 36px;
    height: 36px;
    margin: 2px 2px;
    background: #222;
    border-radius: 50%;
    position: absolute;
  }
  .switch-wrapper .switch:hover {
    background: #282828;
  }
  
  .rent {
    position: absolute;
    left: 30px;
  }
  
  .switch-wrapper.switched:after {
    color: #3498db;
    text-shadow: 0 0 4px #3498db;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  .switch-wrapper.switched:before {
    color: #cfcfcf;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  
  .switch-wrapper.not-switched:after {
    color: #cfcfcf;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  .switch-wrapper.not-switched:before {
    color: #3498db;
    -webkit-transition: all 420ms ease-in-out;
    -moz-transition: all 420ms ease-in-out;
    -o-transition: all 420ms ease-in-out;
    transition: all 420ms ease-in-out;
  }
  
  .not-valid {
    display: none;
    width: 100%;
    height: 30px;
    background: #e74c3c;
    position: absolute;
    opacity: 1;
    top: 70px;
  }
  
  .not-valid span {
    font-family: 'Alegreya Sans SC', sans-serif;
    color: #fff;
    padding: 10px;
    line-height: 1.96em;
  }
  .not-valid span i {
    padding-right: 4px;
  }
  .not-valid span .error-close {
    color: #7b190f;
    float: right;
    padding: 7px 10px 0 0;
    cursor: pointer;
  }
  
  label.error {
    display: none !important;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var s  = $('.switch');
  var sw = $('.switch-wrapper');
  
  $('input').on('click', function(a) {
    a.preventDefault();
  });
  
  function switchToggle() {
    s.stop(false,true).animate({left: "0"}, 200);
  }
  
  s.on('click', function() {
  
       if (sw.hasClass('switched')) {
         switchToggle();
       } else if (sw.hasClass('not-switched')) {
         s.stop(false,true).animate({left: "30px"}, 200);
       }
  
       sw.toggleClass('switched not-switched'); 
  });
  
  $('.search').validate({
  
     invalidHandler: function(event, validator) {
  
      var errors = validator.numberOfInvalids();
  
      if (errors) {
  
        $("div.not-valid span").html("&lt;i class='fa fa-warning'&gt;&lt;/i&gt;  Please type search &lt;i class='fa fa-times error-close'&gt;&lt;/i&gt;");
  
        // Should use .stop() function.
        $(".not-valid").fadeIn();
  
        setTimeout(function() { 
            $(".not-valid").fadeOut();
          }, 2000);
  
        $('.error-close').on('click', function() {
  
          $(".not-valid").fadeOut();
  
        });
  
      } else {
  
        $(".not-valid").fadeOut();
  
      }
  
    }
  
  });
  </code></pre>
  
  <p>All in one is found in <a href="https://jsfiddle.net/kytsh2t5/" rel="nofollow"><strong>this jsfiddle</strong></a> demo.
  Any help would be appreciated!</p>