<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
<form action="submit" class="Search-form">
  <div class="Search-inner">
    <input type="search" id="SearchInput" placeholder="Search"/>
    <label class="Label" for="SearchInput"></label>  
  </div>
  
</form>
</body>
</html>
@color-primary: #ef5285;
@border-size: 3px;

* {
  box-sizing: border-box;
}

html, body {
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  background: @color-primary;
}

input[type="search"]  {
  -webkit-appearance: searchfield;
  font-family: 'Arvo', serif;
  width: 0px;
  height: 50px;
  padding: 25px 25px;
  background: transparent;
  border-radius: 50px;
  color: white;
  font-size: 18px;
  border: @border-size solid currentColor;
  .easeInOutBack(0.5s, all);

  &:focus, 
  &:active {
    width: 200px;
    outline: none;
    + .Label::after {
      height: 25px;
      right: 25px;
      top: 14px;
      bottom: 0px;
    }
    + .Label::before {
      height: 25px;
      right: 25px;
      top: 14px;
    }
  }
  &::-webkit-input-placeholder {
    color: currentColor;
  }
}

.Label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 99;
  &::before,
  &::after {
    position: absolute;
    display:block;
    content: "";
    width: @border-size;
    border-radius: 10px;  
    .easeInOutBack(0.7s, all); 
    background: white;    
  }
  &::after {
    bottom: -22px;
    right: -4px;    
    height: 30px;
    transform: rotate(135deg);
  }
  &::before {
    height: 0;
    right: 0;
    top: 0;
    transform: rotate(45deg);
  }
}


.Search {
  &-form {
    text-align: center;
  }
  &-inner {
    position: relative;
  }
}
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/381212/ceaser.less
  2. https://fonts.googleapis.com/css?family=Arvo:400,700
  3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.