Animated Expanding Search Form

By Harry Manchanda

F6
#
How do I use This?

An Animated Search Form that expands to full-width on focus.

HTML
<input type="search" name="search" placeholder="Search.." class="animated-search-form">

$animated-search-form-initial-width: 10rem;
$animated-search-form-transition-duration: 0.4s;

.animated-search-form[type=search] {
  width: $animated-search-form-initial-width;
  border: 0.125rem solid $light-gray;
  box-shadow: 0 0 3.125rem rgba(0,0,0, 0.18);
  border-radius: $global-radius;
  background-image: url('//image.ibb.co/i7NbrQ/search_icon_15.png');
  background-position: 0.625rem 0.625rem;
  background-repeat: no-repeat;
  padding: 0.75rem 1.25rem 0.75rem 2rem;
  transition: width $animated-search-form-transition-duration ease-in-out;

  &:focus {
    width: 100%;
  }
}


.animated-search-form[type=search] {
  width: 10rem;
  border: 0.125rem solid #e6e6e6;
  box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.18);
  border-radius: 0;
  background-image: url("//image.ibb.co/i7NbrQ/search_icon_15.png");
  background-position: 0.625rem 0.625rem;
  background-repeat: no-repeat;
  padding: 0.75rem 1.25rem 0.75rem 2rem;
  transition: width 0.4s ease-in-out;
}

.animated-search-form[type=search]:focus {
  width: 100%;
}

JS