// css
 * {      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .open .inp {      width: 30%;
    }

    .inp {      transition: width 0.65s linear;
      width: 15%;
      position: absolute;
      right: 10px;
    }

    .inp_txt {      width: 100%;
    }     
    // html
    <div class="box">    <div class="inp">
      <input class="inp_txt" type="text">
    </div>
  </div>

 //js
 window.$ = window.$ || function (el) {      var d = document;      if (typeof el == 'string') {
        el = el.indexOf('.') != -1 ? d.getElementsByClassName(el.replace(/\./, '')) :
          el.indexOf('#') != -1 ? d.getElementById(el.replace(/\#/, '')) :
            d.querySelector(el);
      }      return el;
    }

    $('.inp_txt')[0].onfocus = function () {
      $('.box')[0].className += ' open';
    }

    $('.inp_txt')[0].onblur = function () {      var el = $('.box')[0];
      el.className = el.className.replace(/\s+open/, '');
    }

過渡動畫，寬度慢慢展開